Forum Moderators: not2easy
Relative positioning
Absolute positioning
Fixed widths
Percent widths
Fluid layout
Basically, I want a left navigation bar, a content area, a header and a footer, positioned so the content comes first in the code, then the left navigation bar, then the header, then the footer.
The left navigation bar needs to be a fixed width. But the content area needs to be fluid to expand or contract with screen resolution or window size.
To make it a little more complex, I want about 20px margin around the entire "page." In other words, if all the above page elements were placed in a container div, the container should have a 20px margin. But, I don't know how to use a container AND absolute positioning. And relative positioning seems to throw everything out of whack.
I've experimented a ton with all this, but can't seem to get it. I'd appreciate any quick explanations of how the above-named CSS concepts work together; seems like they don't mix to me but I know there must be an answer somewhere! :)
Thanks,
Matthew
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simmo's CSS Page Template - Three Column Pixel Perfect - Header & Footer</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
margin: 0;
padding:0;
background:#ffffff;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#leftnav{
position:absolute;
top:62px;
left:0;
width:140px;
z-index:3;
background:#ffffff;}
#rightnav{
position:absolute;
top:62px;
right:0;
width:140px;
z-index:2;
background:#ffffff;}
#containmentblock {
width:100%;
z-index:1;
background:#ffffff;
height:80%;}
#header{
height:60px;
border-bottom:1px solid #408080;
width:100%;
background:#C1C1FF;
margin:0;
}
#content{
margin:0 142px 0 142px;
position:relative;
background:#ffffff;
z-index:5;
border: solid #408080;
border-width:0 1px;
}
#footer {
width:100%;
height:35px;
border: solid #408080;
border-width:1px 0;
background:#C1C1FF;
color: #000000;
margin:0;
}
</style>
</head>
<body>
<!-- header div -->
<div id="header"><h1>Header Content Here</h1></div>
<!-- center column -->
<div id="containmentblock">
<div id="content">
<h3 align="center">Three Column Pixel Perfect with Header &
Footer - MK 1</h3>
In this example the table will stretch to the browser dimensions and the content
will be read first,
<p>The left and right columns are positioned absolutley. And now we have a
header and footer. One problem we first have to overcome is that it's impossible
to get the left and right columns to always match the height of the content
column. If the L&R columns are too short we see the page background
and quite simply it looks awful. If the L&R columns are too long they
overlap the page footer.</p>
<p>To overcome the first problem we enclose the main content div in an outer
div. This unfortunatly has to be the same colour as the L&R columns
which must be the same colour as each other.</p>
<p>The overlap? All I think we can do is to stack the footer higher than the
L&R columns and risk losing content but if you place the footer at the
end of the longest column then it will always display last.</p>
<p>One good thing about this method is that we can set the margins of the
center content div much larger than the width of the left and right columns
and therefore should not need to worry about IE5x PC's stupidity. And it
still gives the appearance of being pixel perfect.</p>
<p>Note also, no need for the box hack as we have built some flexibility into
the template! IMO. Does this hold true in your browser? Please let me know.</p>
<p>Also, one potential problem. If you set position:relative for the #c-block
it completely hides the left and right columns. So just leave it out? In
IE6 yes or else nest ALL the blocks within this div, including the header
div.</p>
</div>
</div>
<!-- end of center column --></div>
<!-- end c-block -->
<div id="footer" align="center"><h4>Footer Div - Copyright Information</h4>
</div>
<!-- left column -->
<div id="leftnav"><br />
<h4 align="center">Left Column</h4>
<p align="center">The left navigation column can be used for navigation links,
search box just about anything that you wish to place in here.</p>
</div>
<!-- end of left column -->
<!-- right column -->
<div id="rightnav"><br />
<h4 align="center">Right Column</h4> <p align="center">More links?</p>
<p align="center"><br />
Advertisements?</p>
<p align="center">plus any other ideas that you may have as this can also be
used for any thing that you wish to place here!</p>
</div>
<!-- end of right column -->
</body>
</html>
Just had a question... I tried to change the width of the 'leftnavbar' but it would move the text instead of making the 'navbar' wider. am I supposed to change the width of either '#containmentblock' or 'leftnav' also? (let say, if I add 20 px more on 'leftnav' am I supposed to take the 20 px out from somewhere else?)
I am new to the CSS, so what is 'z-index:' doing there? Thanks in advance
luckydude
