Stretching the main body to fit the page

aaronoafc

02-08-2012, 05:37 PM

Thanks to the help of people on here I've managed to create a layout I quite like however the main body as you will see if you run the code is squashed up in the middle. I have tried adding a "height:600px" or whatever to the css however It moved the left and right navigation down, How do I do it so that it can all fit on the page?

HTML
<!doctype html>
<head>
<link href="styles.css" type="text/css" rel="stylesheet""
</head>
<body>

<div id="container">
<h1>Oldham Athletic Website</h1>

<p><a href="http://oldhamathletic.co.uk" class="oafcpage">Oldham Athletic Official Website</a></p>

<div class="mainbody">Main body of the website</div>

<div class="leftnav">Left navigation</div>

<div class="rightnav">right navigation</div>

</div>

</body>
</html>

CSS
body {
background-color:#0099FF;
font-size:100%;
}
h1 {
c olor:#ffffff;
text-align:center;
font-family:Arial;
font-size:1.75em;
border:2px solid white;
}
.oafcpage{
text-align:center;
font-family:arial;
}
.oafcpage:link {
text-decoration:none;
}
.oafcpage:hover {
color:white;
}
div.mainbody {
width:600px;
margin:0 auto; /*this is the bit that centers it*/
padding: 10px;
overflow: auto; /*clears floats*/
border:3px solid white;
text-align:center;
}
div.leftnav {
float:left;
width:250px;
height:475px;
padding:10px;
border:3px solid white;
margin:0px;
}
div.rightnav {
float:right;
width:250px;
height:475px;
padding:10px;
border:3px solid white;
margin:0px;
}

Editing the div tag "mainbody" makes the two navigation bars go lower meaning the user would have to scroll to see them but I want it so they are all aligned and the "main body" is stretched to fit the space inbetween the two navigation bars.

Thanks in advance

Excavator

02-08-2012, 05:48 PM

Hello again aaronafc,
I didn't realize you were trying to make a 3 column layout.

Look at this simple 3-column layout (http://nopeople.com/CSS%20tips/simple3column/index.html).

aaronoafc

02-08-2012, 10:54 PM

Thanks a lot, still can't work out how to stretch it to fit the page :(

at the minute it is just stuck at the top, I have examined the code on the layout you provided but it is sooo different to my current one I'm unsure where to start!

Excavator

02-09-2012, 12:36 AM

I have examined the code on the layout you provided but it is sooo different to my current one I'm unsure where to start!

It's not so different really.
Look at this to get you started - <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #0099ff;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}
#container {
width: 1200px;
margin: 0 auto; /*this is the bit that centers it*/
padding: 0 0 10px;
overflow: auto; /*clears floats*/
background: #999;
}
h1 {
color: #fff;
text-align: center;
font-family: Arial;
font-size: 1.75em;
border: 2px solid white;
}
h2 a:link {
text-align: center;
font-family: arial;
text-decoration: none;
}
h2 a:hover {color: #fff;}
.leftnav,
.rightnav {
height: 475px;
width: 250px;
padding: 10px;
border: 3px solid white;
}
.leftnav {float: left;}
.rightnav {float: right;}
.mainbody {
height: 475px;
width: 600px;
margin: 0 auto;
padding: 10px;
border: 3px solid white;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Oldham Athletic Website</h1>
<h2><a href="http://oldhamathletic.co.uk">Oldham Athletic Official Website</a></h2>
<div class="leftnav">Left navigation</div>
<div class="rightnav">right navigation</div>
<div class="mainbody">Main body of the website</div>
</div>
</body>
</html>