Layout is easy with CSS. If you are used to using table layout, it will be difficult at first. It's not difficult, it just has different motivations and makes more sense in practice.
You can treat each section of this page as a separate section, no matter which section you choose. You can replace this block with that block absolutely or relatively.
Thepositioning
attribute position is used to define whether an element is absolute, relative, static, or fixed.
Static values are the default values for elements, which are generated in the normal order as they appear in HTML.
relative is like static, but you can use the top, right, bottom, and left properties to offset the original position.
Absolute separates the element from the normal flow of HTML and sends it into a positioning world entirely of its own. In this slightly crazy world, this absolute element can be placed anywhere as long as the top, right, bottom and left values are set.
Fixed also behaves like absolute, but places absolute elements relative to the browser window relative to the page, so, in theory, fixed elements remain completely in the browser viewport when the page scrolls. Why theoretically? If nothing else, works fine in Mozilla and Opera, but not IE.
Using Absolute Positioning Layout
You can use absolute positioning to create a traditional two-column layout by using rules similar to the following in HTML:
Example Source Code [www.52css.com]
<div id="navigation">
<ul>
< li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href= "theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
And apply the following CSS:
Example Source Code [www.52css.com]
#navigation {
position: absolute; top: 0; left: 0; width: 10em;
}
#content {
margin-left: 10em;
}
You will see , a navigation bar with a length of 10em is set on the left. Because the navigation is absolutely positioned, it won't have any impact on the flow of the rest of the page, so all you need to do is set the left border width of the content area to be the same as the width of the navigation bar.
It's so easy! However you are not limited by this two-column approach. With smart positioning, you can lay out as many blocks as you need. For example, if you need to add a third column, you can add a "navigation2" block to the HTML and apply the following CSS:
Example Source Code [www.52css.com]
#navigation {
position: absolute; top: 0; left: 0; width: 10em;
}
#navigation2 {
position: absolute; top: 0; right: 0; width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
The only side effect of absolutely positioning elements is that, because they live in their own world, there's no way to decide exactly where they end up. If you use the above example in a less navigation and more content area, there's no problem, but, especially when using relative values for length and width, you often have to give up hope of putting anything like footnotes underneath. If you really want to do it, instead of absolutely positioning them, float them.
Float
Floating will move an element to the left or right of the same line, while surrounding content will float.
Floating is often used to position small elements within a page (in the original default CSS of this site, the "next page" link of HTML Basic Guide and CSS Basic Guide is floated to the right. Also see: first- in pseudo-elements letter example), but can also be used in larger blocks, such as navigation columns.
Take the following HTML example, you can apply the following CSS:
Example Source Code [www.52css.com]
#navigation {
float: left; width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
If you don't want the next element to wrap around the floated object, you can use the clear property. clear: left will clear the left element, clear: right will clear the right element, and clear: both will clear both the left and right elements. So, for example, you need a page footer, you can add a block to the HTML with the id "footer", and then use the following CSS:
Example Source Code [www.52css.com]
#footer {
clear: both;
}
Well , you've got it. A footnote appears under all columns, no matter how long any column is.
Note that
we've covered positioning and floating in general, with an emphasis on the "large" blocks of the page, but keep in mind that these methods can also be used on any element within those blocks. Combining positioning, floating, borders, padding and borders, you can reproduce any layout design. In terms of layout, there is nothing that tables can do without CSS.
The only reason to use a table layout is if you are trying to accommodate ancient browsers. This is where CSS actually shows its advancement - high-usability pages are a fraction of the file size of table-based pages