CSS:Layouts102
Main Page >> Website fundamentals >> Workbook >> CSS >> More Complex Layouts
Layout 2: 3 columns
The first stage to approach layouts is to draw a simple diagram of how you would like a web page to be presented:
Stage 2: The Divisions
In order to achieve this layout we need three "divisions"
- IMPORTANT
- A "quirk" of CSS is that in order to achieve this kind of layout, we need to create the divisions in the following order:
- menu, right, content
- A "quirk" of CSS is that in order to achieve this kind of layout, we need to create the divisions in the following order:
HTML Document - no CSS yet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>CSS 6</TITLE>
<LINK rel="stylesheet" href="style6.css" type="text/css">
</HEAD>
<BODY>
<DIV id="menu">
This is the menu
<UL>
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
<LI>Item 5</LI>
</UL>
</DIV>
<DIV id="right">
Some interesting information in the right-hand column
</DIV>
<DIV id="content">
<H1>This is the Content of the page</H1>
<P>Very interesting content - wouldn't you agree?</P>
</DIV>
</BODY>
</HTML>
Stage 3: Match the divisions to the drawing
Create the following CSS file (and save as style6.css)
#menu {float:left}
#right {float:right}
Stage 4: Tidy up the presentation
Let's put some more content in the CSS to improve the appearance.
Modify the CSS to the following:
#menu
{
float:left;
border: 2px solid #0000ff;
margin: 0px 0px 0px 10px;
padding: 10px;
width: 200px;
}
#right
{
float:right;
border: 2px solid #0000ff;
margin: 0px 0px 10px 0px;
padding: 10px;
width: 200px;
}
#content
{
border: 2px solid #0000ff;
margin: 0px 240px 0px 250px;
padding: 10px;
}
The new concepts introduced here are:
- float:right
- margins with 4 sets of numbers
The page should now look something more like this:
Layout 3: 3 rows, 3 columns
A very popular layout is to have a header section, a three column section, and a footer on one page - as per the picture below
Stage 2: The Divisions
In order to achieve this layout we need lots of divisions, one division for the header, one to hold the middle 3 divisions, and one for the footer.
- REMEMBER
- A "quirk" of CSS is that in order to achieve this kind of layout, we need to create the middle divisions in the following order:
- header, middle (menu, info, content), footer
- A "quirk" of CSS is that in order to achieve this kind of layout, we need to create the middle divisions in the following order:
HTML Document - no CSS yet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>
CSS 7
</TITLE>
<LINK rel="stylesheet" href="style7.css" type="text/css">
</HEAD>
<BODY>
<DIV id="header">
Some company logo or heading
</DIV>
<DIV id="middlesection">
<DIV id="menu">
This is the menu
<UL>
<LI>Item 1
</LI>
<LI>Item 2
</LI>
<LI>Item 3
</LI>
</UL>
</DIV>
<DIV id="info">
Some interesting information in the right-hand column
</DIV>
<DIV id="content">
<H1>
This is the Content of the page
</H1>
<P>
Very interesting content - wouldn't you agree?
</P>
</DIV>
</DIV>
<DIV id="footer">
Some company disclaimer or small print
</DIV>
</BODY>
</HTML>
Stage 3: Tidy up the presentation
Let's put some more content in the CSS to improve the appearance.
Modify the CSS to the following:
#header
{
border: 2px solid #0000ff;
padding: 10px;
margin: 10px;
}
#middlesection
{
padding: 10px;
margin: 10px;
}
#menu
{
float:left;
border: 2px solid #0000ff;
margin: 0px 0px 0px 10px;
padding: 10px;
width: 200px;
}
#info
{
float:right;
border: 2px solid #0000ff;
margin: 0px 0px 10px 0px;
padding: 10px;
width: 200px;
}
#content
{
border: 2px solid #0000ff;
margin: 0px 240px 0px 250px;
padding: 10px;
}
#footer
{
border: 2px solid #0000ff;
padding: 10px;
margin: 10px;
}
The page should now look something more like this:
A Quick note
When creating this layout, if the height of either the left or right columns is more than that of the contents of your page, they will 'spill' over onto your footer. Ensure the height of your contents is greater than the heights of both your side columns to avoid this. (added by Gary Steinert 0709495)
To avoid this use clear:both; in the footer of your stylesheet. (added by Harpreet Singh 0917661)
Ready to move on?
When you're happy with the concepts introduced in this chapter, take a look at CSS:Tips for some more tips and tricks you might like to experiment with.
Related Pages
<categorytree mode=pages>CSS</categorytree>
