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; }.

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.