This three-column layout with header also uses absolute positioning. In this example, we will use the three-column layout but add header information at the top of the document and enclose it in a new DIV called "header". The additional markup is shown below:
<div id="header">
<h1>Three Column Layout with Header</h1>
</div>
This
EXAMPLE
shows how the HTML markup for this example renders without any styling applied to it.
Try it!
Insert a header into your three-column layout document and save it as 3_col_header.html. Follow along with this tutorial and adjust the styling for the header by adding width and centering and then re-position the sidebars.
Add Styling to Header
Set a height for the header and add a temporary background color and set the top margin of the H1 tag to zero to override the default browser setting. Notice how the header pushes the content DIV down but doesn't affect the absolutely positioned sidebars. We'll fix that next!
EXAMPLE
div#header { height: 60px; background-color: #fcc; }
div#header h1 { margin-top: 0px; }
Adjust the Absolutely Positioned Sidebars
The 2 side columns are positioned absolutely. Add the height of the header (60 pixels) to their TOP values.
EXAMPLE
div#nav {
position: absolute;
width: 150px;
border-right: 2px solid red;1
left: 0px;
top: 60px;2
padding: .5em 0 0 0 ;
margin: 22px 0 0 15px;
border-top: 2px solid #069;
border-bottom: 1px solid #069;
}
Another way to do this without having to use absolute pixel values for the height
of the H1 and the TOP value adjustments is to add a big
"container" DIV
around the
"content",
"left"
and
"right" DIV's.
Set its position to relative. Then, the page's main content and the
columns will always be positioned relative to the depth of the header.
And, if you add more content, you won't have to make any adjustments. In the following
example, the TOP properties have been reset back to 0.
EXAMPLE
Style sheet
div#container { position: relative; }
Markup
<body>
<!-- open header div ************************* -->
<div id="header">
<h1>Three Column Layout with Header</h1>
</div>
<!-- close header div ************************* -->
<!-- open large container div **************** -->
<div id="container">
<div id="nav">
. . .
<div id="content">
. . .
<div id="rightcolumn">
. . .
</div>
<!-- close large container div **************** -->
When using lots of DIV's as you design your page layout, it's a good idea to make note of the name when you open and close each DIV. Otherwise, it's easy to get them mixed up. Nesting your HTML markup using indentation can also help you match opening tags with their corresponding closing tags, as well as making the element hierarchy more obvious.
Styling the Header
We want the header to be centered even if the browser width changes. Set a width
on the H1 tag large enough to contain the text (adjust this setting until it looks
good to you). This also keeps the H1 style from defaulting to the width of the DIV.
Set the left and right margins to auto. The auto value
means 'as
large as the available width allows'—setting both right and left margins
this way will center the element within the allowed width.
EXAMPLE
When using margin-right:auto; margin-left:auto to center
an element horizontally, you must also set an absolute value for the element's width!
div#header h1 {
width: 17em; /* width of text */
margin-top: 0px;
padding: .25em;
margin-right: auto; margin-left: auto;
font: 1.5em bold "comic sans ms", "Times New Roman", cursive;
}
Restyle Headline Box
Remove the background color and add text-align:center to the div#header rule
to make sure older browsers center the text and change the top and bottom border
of the H1 tag to match the left and right columns.
EXAMPLE
div#header h1 {
width: 17em; /* width of text */
margin-top: 0px;
margin-right: auto; margin-left: auto;
font: 1.5em bold "comic sans ms", "Times New Roman", cursive;
text-align: center; /* for older browsers */
padding: 0 0 .1em;
border-top: 2px solid #069;
border-bottom: 1px solid #069;
}