CSS sidebar problem

EirePlane · 1 Oct 2006 at 19:11

I'm trying to design a website using CSS. It has a header, a main content area and a navigation bar on the left. These are all set out using divs

Is there any way to make the sidebar the same length as the main content area without defining the height on each page? at the moment it is only going as far as it's content

EirePlane · 1 Oct 2006 at 20:04

nope, didn't work

in case it helps, the CSS for the sidebar is:

Code:

div.menu {
  width:200px;
  height:100%;
  text-align:left;
  float:left;
  background-color:#E2E2E2;
  color:#000000;
}

EirePlane · 1 Oct 2006 at 21:02

ok, problem now seems to be that I cant get the footer to show either.

code is as follows:

Header

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

   <head>
      <title>London Dude</title>
      <meta name="description" content="My Personal website about me and anything I like">
      <meta name="keywords" content="London Dude">
      <meta http-equiv="generator" content="PHP Designer 2006 - BETA">
      <link rel="stylesheet" type="text/css" href="main.css">
   </head>

   <body>
   <center>
   <div class=wrapper>
   <div class=banner>
   <img class=banner src="siteimages/banner.jpg" alt="London Dude">
   </div>

   <div class="menu">
   <h2>Navigation</h2>
   <ul>
     <li class="home">Home</li>
   </ul>
   </div>

   <div class="body">

body

Code:

<?php include 'header.php'; ?>
Lorem ipsum dolor sit amet...
<?php include 'footer.php'; ?>

footer

Code:

   </div>
	<div class=footer>
	© Mitchel Moriarty 2006
	</div>
   </div>
   </center>
   </body>
</html>

CSS

Code:

html {
  background:#000000;
  font-family:Arial;
  font-size:10pt;
}

div.wrapper {
  width:800px;
}

div.banner {
  width:800px;
  height:100px;
  background-image:url('siteimages/banner_bg.jpg');
}

img.banner {
  float:left;
}

div.body {
  width:600px;
  background:#ffffff;
  text-align:left;
  float:right;
}

p {
  padding:2px;
}

div.menu {
  width:200px;
  text-align:left;
  float:left;
  background-color:#E2E2E2;
  color:#000000;
}

h1 {
  font-size:14pt;
  text-decoration:underline;
  text-transform: capitalize;
  font-style:italic;
  padding:2px;
}

h2 {
  font-size:10pt;
  text-decoration:underline;
  font-style:bold;
}

li.home {
  list-style-image:url('siteimages/icons/home.png')
}

div.footer {
width:800px;
height:20px;
background-image:url('siteimages/footer.jpg');
}

so far it is producing this:

no that there is also no footer at the bottom

EirePlane · 1 Oct 2006 at 22:58

cheers for that, needed a lil tweaking but works perfectly now.