Originally posted by hurric00:
Hi,
Thanks for the reply. That's exactly what i wanted (despite my vague explanation).
I'm gonna read some more docs to understand it fully. I not sure what .clear does yet and why you have a margin-right in #main. I had it set up all wrong i guess 
When an object is floated, it's taken out of the "flow" of its container. In this case, #side is being taken out of the flow of all the other objects in #site. If you try that site and remove the margin of #content and the background of #side, you will notice that the contents will actually go
under the side. It's completely ignoring the column because, since it's floated, it's taken out of the flow. Also, if the column is longer than the main content, then it will actually spill right out of the container... again it is being ignored and the height of the container isn't affected but the floated object. Keeping all that in mind, I can now (assuming you understood it
) explain the margin and the clearer div.
When I said that the floated div was completely ignored, that was slightly misleading... in terms of actual layout, it's correct, however, you'll notice that the
text of the content div
is affected by the floated div. I don't know exactly why this is or if there should be perhaps an option to allow it to affect the text or not... but again, it's something that should be kept in mind. The problem is that although the text isn't underneath the right column, it's still right next to it... there's no breathing room. To fully understand the purpose of the margin, make sure that the "#side"'s background is turned off. Now with the main content, change its right margin to 50px, check. Notice how it doesn't really change anything except the red? Once you reach 100px, you're exactly the same place you were before.. assuming you don't want background colors in the final design. Now once you add 110px, you are 10 pixels away from the column, thus giving it some space. Does that make sense?
Now about the clearer... like I mentioned above, the floated div (or any floated item) doesn't affect the vertical height of its container. To solve this, you could simply make sure that the side columns are never longer than the content... but of course this is a half-assed solution and something that you can't really control. To test this, remove the clearer div, and make the column longer (2 or more lines longer) than the content. You'll see that it spills out of the main wrapper div. Add another div, with one line of text. Notice that it goes straight underneath the content div, and it too ignores the floated items. Luckily, there is a property that defines whether an object should allow an object to be floated to its left, right, or both sides. To not allow an object to be floated to an object's side is called "clearing a float". Thus, if you give your newly added div, the "clear" class, you'll notice that it appears below the floated divs, since they aren't allowed to be to the left or right of it. Now remove the text from inside your new div and you can see how the clearer div works. Hopefully
Excuse the rather longwinded explanation, but for me it's usually a lot easier to understand something if you actually know how and why it works. I could of simply said that it prevents the column from spilling out of the main div, but I don't think that would of been as helpful. If that still doesn't make any sense, feel free to ask any questions
If you're more familiar with the technique of floating images within a paragraph... either with the float property or 'align="left"' and 'align="right"', then
this article might make things a bit clearer.
Top
