Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Stretching the main body to fit the page

    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
    Code:
    <!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
    Code:
    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello again aaronafc,
    I didn't realize you were trying to make a 3 column layout.

    Look at this simple 3-column layout.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by aaronoafc View Post
    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 -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <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>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •