Floating takes an element, and pushes it to one side of its container or parent element. It takes the element out of the document flow, so it no longer affects its parent's dimensions directly.
What this means is the floated element while still under its parent's general jurisdiction, no longer has any effect on it. If the parent has no height defined then the it will simply collapse, and the floated element will just float above it.
example:
HTML
<div style="width:300px; border: 2px solid red; background-color:#dedede;">
<div style="float:left; background-color:#464688; width:160px; height:200px; color:#dedede;">This Div is floated left</div>
</div>
See that red line? That's the parent div that collapsed when I floated the inner div.
As said before, floated elements do not contribute to their parent's dimensions.
To resolve this you can do 1 of two things that will be cross browser compliant.
Add an overflow property to the style of the parent div, or add an extra clearing element to clear the float from the inner div.
Adding overflow:
HTML
<div style=" overflow:hidden; width:300px; border: 2px solid red; background-color:#dedede;">
<div style="float:left; background-color:#464688; width:160px; height:200px; color:#dedede;">This Div is floated left</div>
</div>
Any type of overflow will accomplish the same result, however :hidden is better if you don't want to have disabled scrollbars, or just a tiny amount of useless scrolling in some browsers.
Adding a Clearing Element
HTML
<div style="width:300px; border: 2px solid red; background-color:#dedede;">
<div style="float:left; background-color:#464688; width:160px; height:200px; color:#dedede;">This Div is floated left</div>
<p style="clear:both;"></p>
</div>
Adding an empty element in this case a paragraph element with a style consisting only of clear:both will clear, or reset the floating, and make the container wrap around the floated elements. It looks the same as the overflow method, but has a small caveat. It may cause an extra space to be present, if you have margin or padding applied to the element that is clearing the float.
This is all fine and dandy when there's only one floated element, what happens when you have 2 or 3 or more floated elements. Here's where CSS gets interesting.
Think of a cardboard box for a moment, and imagine you want to place place X amount of objects side by side on one side of the box. You can keep placing them as long as you have room inside the box. Once you exceed the boxes width, you have to move the object "under" the other objects and start a new row.
The same happens in a div with floated elements. When the total width of the objects inside exceeds the the parent's width they drop down. The direction they drop is based on the direction they are floated. If they are floated left, they drop down and move all the way to the left, if they are floated right they'll move to the right.
HTML
<div style="width:300px; border: 2px solid red; background-color:#dedede;">
<div style="float:left; background-color:red; width:70px; height:200px; color:#dedede;">This Div is floated left</div>
<div style="float:left; background-color:green; width:90px; height:200px; color:#dedede;">This Div is floated left</div>
<div style="float:left; background-color:blue; width:60px; height:200px; color:#dedede;">This Div is floated left</div>
<div style="float:left; background-color:yellow; width:120px; height:200px; color:#dedede;">This Div is floated left</div>
<p style="clear:both;"></p>
</div>
<hr>
<div style="width:300px; border: 2px solid red; background-color:#dedede;">
<div style="float:right; background-color:red; width:70px; height:200px; color:#dedede;">This Div is floated left</div>
<div style="float:right; background-color:green; width:90px; height:200px; color:#dedede;">This Div is floated left</div>
<div style="float:right; background-color:blue; width:60px; height:200px; color:#dedede;">This Div is floated left</div>
<div style="float:right; background-color:yellow; width:120px; height:200px; color:#dedede;">This Div is floated left</div>
<p style="clear:both;"></p>
</div>
The width of the parent doesn't need to be explicitly set, it can be inherited from the parent's parent. Or even as far as the browser window dimensions.
What happens when the dimensions are based on the browser window, is the floated elements will drop down or move back up as the window is resized.
An important thing to keep in mind when working with floats is that an element's dimensions aren't only its width and height. Border, padding and margins also contribute to its dimensions.
If you have a parent element with a width of 600px but it has 3 floated elements inside with a width of 200px each then they should float on the same line right?
As long as they have 0 border, margin and padding they will sit side by side. When you start adding padding and border things change a bit.
If you have a container that is 600px wide, and 3 floated elements inside each 200px but each has 2px padding and maybe 2px of border, plus say 4px of margin, then one of them will drop down.
100px width + 2px (padding left), + 2px (padding right) + 2px (border left) + 2px (border right) + 4px (margin left) + 4px (margin right) = 116px total * 3 elements is then 648px in a 600px wide element.
Its all in the math.
Next time will look at how to achieve some more interesting layouts using floated elements.
No comments:
Post a Comment