CSS - PITA

**Hightower** · 28th November 2008, 12:19 PM

Can anybody help me? First I'll give my code and then explain what i want to acieve.

PHP

HTML Code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/main-style.css" />
</head>
<body><div id="wrapper">
    <div id="leftnavigation"><p>Navi here</p></div>
    <div id="contentarea">
        <div id="header"><h1>Banner goes here</h1></div>
        <p>Content here</p>
    </div>
    
</div></body>
</html>

CSS

Code:

body{
    background-color:#000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#wrapper{
    margin:0px auto;
    width:754px;
    height:97%;
    padding:7px;
    background-color:#FFFFFF;
}

#leftnavigation{
    height:100%;
    background-color:#FFCC33;
    width:144px;
    margin-right:17px;
    float:left;
    text-align:center;
    padding-left:3px;
    padding-right:3px;
}

#contentarea{
    float:left;
    width:587px;
    height:100%;
}

Right - I want the page to expand as needed when more content is displayed, but I want the left navigation to expand with it.

How easy is this? Tried other forums and things but couldn't get my head around the answers.

Any help appreciated thanks,

**stratisphere** · 28th November 2008, 12:23 PM

Put the content div inside the navigation div. Then give the content div a left (or right) margin of the navigation's width.

If you want some code, lemme know.

**Hightower** · 28th November 2008, 12:27 PM

Please - just has a play and can't it it right. Any code would be great!

**stratisphere** · 28th November 2008, 01:01 PM

Think this is what ya want...

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <div id="navigation">
	<p>links...</p>
      <ul>
        <li>oink1</li>
        <li>oink2</li>
        <li>doink1</li>
        <li>doink2</li>
      </ul>
	  </div>
    <div id="content">  
	<h1>this is a content bit...</h1>
	<p>did you know that? I wonder if this works... yes it does!</p>
	<p>dfg</p>
	<p>df</p>
	<p>f</p>
	<p>dfs</p>
	<p>dfsg</p>
	<p>dfsg</p>
	<p>&nbsp;</p>
</div>
</div>
</body>
</html>

style.css

Code:

#content {
	border: 1px solid #000000;
	margin-left: 150px;
	height: 100%;
}
#navigation {
	width: 150px;
	border: 1px solid #FF0000;
	height: 100%;
	float: left;
}
#wrapper {
	height: 97%;
	border: 1px solid #0000FF;
}
body {
	height: 100%;
}

**Hightower** · 28th November 2008, 01:22 PM

Brilliant - thanks!

Just gotta figure how to get the footer to stay on the bottom now!

**webman** · 28th November 2008, 01:24 PM

For the footer, try clear:both;.

**stratisphere** · 28th November 2008, 01:38 PM

was just going to suggest that. To make it stay on the very footer, put it outside the wrapper and do bottom: 0px; in the css. For that to have effect you will have to set the Position one aswell, options are: relative, absolute & static, each give slightly different looks so have an experiment with it.

**Hightower** · 28th November 2008, 01:39 PM

Originally Posted by webman

For the footer, try clear:both;.

I want the footer to remain in the content div though - so the left menu goes all the way down still and the footer starts to the right of it at the bottom of the page.

**Hightower** · 28th November 2008, 01:47 PM

Got it working - thanks!

LinkBack

Thread Tools

Search Thread

CSS - PITA

Thanks to stratisphere from:

Thanks to stratisphere from:

Similar Threads

CSS Hacks

XHTML + CSS Help

CSS Styles

CSS gurus!

File ownership pita!

Thread Information

Users Browsing this Thread

Posting Permissions