Hi there, I was working with some website designers and I figure out that plenty of them are still positioning with tables, perhaps it works but it is too much confusing for who does it or who read's it...

I used to use floats, left, right and both or positioning absolute, but I realized another way to do and perhaps it is a well-known technique but I want to share here for who doesn't know, and I'll give an example..

Just align using the css property "display: block-inline", that property just turns a block element to inline, now the example...

<div style="width:120px; height:200px; background-color:#f00"> This is a block div </div>
<div style="width:120px; height:200px; background-color:##313131"> this is another div </div>

In this example we didn't used any position property so the div's still one above the other, and still in the format of block,

if we use in the css the property of "display:block-inline" in both div's we transform them into inline element so it would be like one next to the other, who didn't know, just try it, it's simple, fast and easy to use.

Thanks for the attention and I hope u understood me, I'm not english...

Inline-block is used in most modern frameworks, I've been using it for ages and I'm so glad I've ditched the whole float: left; crap when possible.

 

Also:

 

<div> Is a block element (display:block;).

<span> Is an inline element (display:inline-block). It is in between inline and block so it can have margins and padding, but semantically should not have block elements inside. Although the element can be placed inline with items, it isn't display:inline; by default.

 

<div>

<span></span>

</div>

 

<span>

<div></div>

</span>