I have designed and coded only a few pages using HTML and CSS and I always tend to float everything but looking at other web sites it looks like most of them tend to absolutely position everything.
My Current structure:
<div id="header">
<div id="logo"> Logo goes here </div>
<ul id="nav"> Nav goes here </ul>
</div>
Then I float my header as well as the child divs, but I have seen that most of the programmers/designers absolutely position all these elements, something like this…
<div id="logo"> Logo goes here </div>
<ul id="nav"> Nav goes here </ul>
and absolutely positioning them with CSS.
What would be the best way to create the structure of you site? Is there any benefit of doing it one way over the other?
I have read a few books but none of them tell you what method to use they just show you how to do it.
For the most part, avoid absolute positioning. It takes elements out of the document flow, making it hard to get them to play nicely together. For example, if your main content is absolutely positioned and you have a footer below that, you would have to move the footer manually every time you added content, which is a hopeless situation.
However, with small items like a logo or a menu within a head section, there’s a reasonable argument for placing it absolutely. Just remember, though, that if font sizes are increased significantly, these abs;pos elements might start to overlap rather than reflow. So again, use wisely and with caution.
Absolute positioning is mainly useful for placing small items here and there on an occasional basis.
For the most part, if you want things sitting side by side, use floats.
