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

TheCrow · 1 Oct 2006 at 19:52

Try putting a footer on, even if its just very small in height.

I have only started website stuff about a week ago, so i could easly be way off what is needing done.

hope this helped you.

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;
}

TheCrow · 1 Oct 2006 at 20:15

again i can only go on what iv done for my website. I only ever set width's. left the height to sort its-self out. Which seemed to work when the footer linned up with the width of the res of the page.

some one with lots more exp will be along soon im sure though.

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

TheCrow · 1 Oct 2006 at 22:36

Code:

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

div.wrapper {
	background:#ffffff;
  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;
background-color:#E2E2E2;
clear:both;

}

That shoudl work, just make sure u have no gaps within container or you will have #ffffff as the color in the gaps.

EirePlane · 1 Oct 2006 at 22:58

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