Align div horizontally with CSS3

Question

this is my code. I made those divs as table cell

<div class="logo">
text
</div>

<div class="stats" >
text
</div>

and my css

.logo
{
    display:table-cell;
    width:420px;
}

.stats
{
    display:table-cell;
    width:200px;
}

Is it possible to somehow align first div to the left and second one to the right without using float? Or just to align content inside them to the left and right?

Answer 1

There are much cleaner ways to go about this than using obscure display methods like table-cell - usually you can accomplish what you want with block , inline , or inline-block . What are you doing that requires table-cell?

That being said, there's a few things you can do. To align text or inline content inside those elements, it's just text-align - left or right . If you're nesting divs, you can apply a rule like .logo *{ float: left; } .logo *{ float: left; } .

I'm unfamiliar with the dynamics of table cell display, but if you want to position without using float, usually you do position: absolute; along with left: 0px; and right: 0px; . This has its own set of problems though.

Answer 2

换句话说，你可以使用带浮动的填充来创建表的伪效果，并且“padding + margin + constraint div”被证明是我最好的对齐属性...虽然这可能无法解决你的“没有浮动“问题。