Fact #4: Floated DIVs can simulate “inline” block elements.
So how can we have elements with specific dimension, but put them together in the same line? Easy! CSS provides us with another attribute to accomplish this task: float. So if you want to keep DIVs as blocked, but want to show them in 1 line, then you have to float them (eg. to the left).
<div style="float: left; width: 100px; border: 1px solid red"> 100px DIV with red border</div> <div style="float: left; width: 100px; background: green"> 100px DIV with green background</div> <div style="float: left; width: 100px; border: 3px solid orange; padding: 5px; margin: 20px; background: brown; color: white"> 100px DIV with a lot of styles</div> <div style="float: left; width: 100px; height: 100px; border: 7px solid purple; padding: 20px; margin: 5px; background: cyan; font-size: 12pt"> 100px DIV with big font + height</div>
There you go! Now all those DIVs are happily neighbors, and all of them still keep their sizes. Under the skin they’re all still block elements, but visually they “look” like inline elements. All good, except one thing: where’s that box surronding those DIVs? It’s still there; it’s just that the browser is unable to compute the height of the parent container, hence giving it 0px height. That’s why you’re seeing a horizontal line instead of a box, since the parent is squashed flat! You can read more about this so-called The Great Collapse in css-tricks.com. And BTW that article has a very good explanation about float and clear attributes, so you might want to spend time there later on.
The easiest way to solve this is to have an empty DIV at the end that clears the float. Since it’s a DIV, and since it’s empty, there won’t be any negative side effect in terms of appearance.
<div style="float: left; width: 100px; border: 1px solid red"> 100px DIV with red border</div> <div style="float: left; width: 100px; background: green"> 100px DIV with green background</div> <div style="float: left; width: 100px; border: 3px solid orange; padding: 5px; margin: 20px; background: brown; color: white"> 100px DIV with a lot of styles</div> <div style="float: left; width: 100px; height: 100px; border: 7px solid purple; padding: 20px; margin: 5px; background: cyan; font-size: 12pt"> 100px DIV with big font + height</div> <div style="clear: both"></div>
Also it might not look like it, but the DIVs above are actually vertically aligned by their tops. The ‘problem’ is due to different top margins, so if you make the top margins the same, it will look better. Adding right margins are also a good idea to make space in-between DIVs in a line.
<div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; border: 1px solid red"> 100px DIV with red border</div> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; background: green"> 100px DIV with green background</div> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; border: 3px solid orange; padding: 5px; background: brown; color: white"> 100px DIV with a lot of styles</div> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; height: 100px; border: 7px solid purple; padding: 20px; background: cyan; font-size: 12pt"> 100px DIV with big font + height</div> <div style="clear: both"></div>
