Untitled Document

http://css.maxdesign.com.au/floatutorial/index.htm

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

* Back
* Next

CSS CODE
ul#navigation
{
list-style-type: none;
margin: 0;
padding: .5em 0;
border-top: 1px solid #666;
}

ul#navigation li a
{
display: block;
width: 5em;
color: #FFF;
background-color: #036;
padding: .2em 0;
text-align: center;
text-decoration: none;
}

ul#navigation li a:hover
{
color: #FFF;
background-color: #69C;
}

ul#navigation .left { float: left; }
ul#navigation .right { float: right; }

HTML CODE
<p>
Lorem ipsum dolor sit amet...
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>

=========================

CSS CODE
ul#navlist
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #036;
}

ul#navlist li { display: inline; }

ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}

HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

==================================

Floatutorial - Step by step CSS float tutorial

* Home
* Listamatic
* Listamatic2
* Listutorial
* Floatutorial
* Selectutorial

* « Previous Step
* Main menu
* Next step »

Tutorial 9 - Liquid three column layout - all steps combined
Step 1 - Start with the semantically marked up code

To lay out a page into three columns, you need to start with the basic page structure. In this case we will use some dummy content to create the three column template. The page has been grouped into six separate divs, and each of these divs has been given a unique ID selector. The divs are labeled; "container" (wrapped around the entire page's content), "top" (for the top banner), "leftnav" (for the smaller, left column), "rightnav" (for the smaller right column), "content" (for the main content) and "footer" (for the footer across the bottom of the page).
Step 2 - Add width and margin to the container

To get the content to sit in from the edge of the browser window (or viewport) we need to set width and margins on the main div that wraps around the content.

In this case we will use a width of 90% so the CSS declaration used is: "width: 90%". Any width could be used, including 100%, which would force the content to the left and right edges of the viewport.

To centre the div in the viewport, we apply "auto" margins to left and right. To move the div away from the top and bottom of the viewport we use a margin of 10px. These can be combined into one shorthand CSS declaration: "margin: 10px auto". This will apply a margin of 10px to the top and bottom and auto margins to the left and right.

Some browsers (particularly Win/IE5 and Win/IE5.5) do not support the auto left and right margins. However, with the addition of two simple rules, these browsers will center the containing block correctly.
#container
{
width: 90%;
margin: 10px auto;
}
Step 3 - Add color, background color and border

To add color and background color to the main div, use "background-color: #fff;" and "color: #333;".

To apply a border to the div, use "border: 1px solid gray;".
background-color: #fff;
color: #333;
border: 1px solid gray;

}
Step 4 - Add line height

To increase readability, you can increase the overall line-height of text. If it is applied to this main div, it wil cascade down throughout all divs below. The rule can be written as "line-height: 130%;".
line-height: 130%;
Step 5 - Styling the top banner

To style the top div, we will set a background color, padding and a border across the bottom. The three declarations will be: "padding: .5em;" to add padding to the div, "backgound-color: #ddd;" to add a background color and "border-bottom: 1px solid gray" to apply a border to the bottom of the div.
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
Step 6 - Remove margins and padding from the h1

Inside the top banner there is an H1 tag. We want the words to sit .5em in from the top and left edge of the div. Browsers add different amounts of padding above an H1, it is easiest to remove all padding and margin from this H1 and let the div provide the padding. This is achieved by using a decendant selector - "#top h1 { padding: 0; margin: 0;}".
#top h1
{
padding: 0;
margin: 0;
}
Step 7 - Apply "float", margin and padding to the leftnav

To float the left nav, we need to use the rule: "#leftnav {float: left;}". When a div is set to float, a width must also be included, so we can add another declaration: "width: 160px;".

Next, we set the margin to "0", add 1em of padding (which will move the text away from the edges of the div).
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
Step 8 - Apply "float", margin and padding to the rigthnav

To float the "rightnav" div, we need to use the rule: "#rightnav {float: right;}". Like the "leftnav" div, we add a width, margin and padding.
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
Step 9 - Setting margins to the "content" div

This next step is the most important of the entire process. The "leftnav" div has been floated, so text from the "content" div will flow down its left edge and then wrap around under it. To make the text appear as it is in a new column, we apply margin-left to the "content" div, making sure that the width is greater than the overall width of the "leftnav" div. In this case, we will use "margin-left: 200px", which will give us 40px margin between the leftnav and the main content. The same is done to the right side.

We will also apply a border to the left and right of the "content" div. This could be a problem if the "leftnav" div is longer than the main content. If this is the case, the border can be applied to the right side of the "leftnav" div instead of the "content" div.
#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
}
Step 10 - Add padding to the "content" div

To add padding to the content div use "padding: 1em;".
padding: 1em;
Step 11 - Styling the footer

To style the footer, we first need to set it to "clear: both". This is critical, as it will force the footer below any floated elements above. We then add "padding: .5em" and "margin: 0" .
#footer
{
clear: both;
margin: 0;
padding: .5em;
}
Step 12 - Add color and background color to the footer

To add color and background color to the footer use the following declarations: "color: #333;" and "background-color: #ddd;".
color: #333;
background-color: #ddd;
Step 13 - Adding border to the footer

To add a border to the top of the footer use: "border-top: 1px solid gray;".
border-top: 1px solid gray;
Step 14 - Removing top margins

To remove the space above content in the "lefnav", "rightnav" and "content" divs, use the following rules: "#leftnav p, #rightnav p { margin: 0 0 1em 0; }" and "#content h2 { margin: 0 0 .5em 0; }".

Browsers use different amounts of margin above paragraphs and headings. It is safe to remove all top margins, as long as there are bottom margins to keep the paragaphs and headings seperate from elements below them.
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
Step 15 - Setting a maximum line length

If you want to set a maximum width on your main content, you can do this by adding a new rule: "#content2 { max-width: 36em; }".

Although IE browsers will ignore the rule, other standards compliant browsers will not allow the content area to go wider that 36em - keeping the line length to a comfortable width.
#content { max-width: 36em; }
Finished!

« Back to main menu
Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
Subheading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Footer
CSS CODE
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

HTML CODE
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
</div>
<div id="rightnav">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidun.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut</p>
</div>
<div id="footer">
Footer
</div>
</div>
Other Max Design articles and presentations
Associated with webstandardsgroup.org