Just when I think I have a complete handle on CSS, something comes along to pop that bubble of confidence!  I'm working on a simple series of web pages that have:

• A header
• A left menu
• The main content directly to the right of the left menu
• A footer

So essentially a 2-column layout.  I know the old trick of setting the background colour to be the same as either the left or right DIV (the left menu or main content in this case) but I like to have gradient backgrounds.  Here's an example of the page I'm working on.  Do you notice that there's a large white gap on the right and below the main content DIV but above the footer?  I've been playing around with CSS for a couple of hours now and just can't seem to figure out how to make it work.  I'm hoping that CSS guru might be able to help.

Here are the pertinent parts of the CSS file:

html, body
{
  background-color:white;
  margin:0;
  border:none;
  width:100%;
  min-width:100%;
}

div.container
{
  width:100%;
  min-width:950px;
  margin:auto;
}

div.leftMenu
{
  float:left;
  width:140px;
  min-height:550px;
  vertical-align:top;
  margin:0;
  padding:10px;
  padding-top:130px;
  border:none;
  background:lightgreen url(/Images/Backgrounds/blueGreenGradient.jpg);
}

div.mainContent
{
  float:left;
  background:lightblue url(/Images/Backgrounds/lightBlueGradientTall.jpg);
  height:100%;
  width:80%;
  margin:auto;
  vertical-align:top;
}

I don't know if this will help, but in "div.mainContent" if I increase the width to 90% then this DIV is forced below the left panel.  That's clearly not what I want.  What I'd like is for the main content to occupy 100% of the width to the right of the left panel.

Any ideas?

Robert W. 

Hi.
You could change your "leftMenu" DIv's width to a percentage value (e.g. 12%).  then you can have your "container" width at, e.g. 88%.

Check out http://forums.asp.net/t/1259162.aspx too.'

I can also highly recommend http://www.alistapart.com/articles/holygrail, a really good source for CSS links.

Kelsey,

Thank you for your tip and for the article, which I'm going to read thoroughly in a minute.

I decided to try your % idea first.  Here's something weird: I set the mainContent width to 85%.  Then when:

1. The leftMenu width was set to 15%, the mainContent would always display below the leftMenu.
2. The leftMenu width was set to 12%, the two DIVs seemed to work well together albeit with a gap on the far right of mainContent.
3. The leftMenu width was set to 13% or 14% I had mixed results.

I'm curious as to why things didn't work out correctly when the leftMenu width was set to 15% ?  After all, there's nothing else on that row of objects, so how come 15% + 85% != 100% ?

Robert 

I have run in to a similar sort of problem when coding "tight" pages for graphic effects. One thing you didn't mention is how this looks in different browsers. Apparently some browsers set a default margin, which can really make floats tricky. In order to clear that out from the get go I put this in my CSS:

 html  {

margin: 0;

padding: 0;

}

That often helps. I put it in 'html' instead of 'body' because different browsers read the DOM differently.

Even with this I often have to resort to absolute postitioning and for IE I often have to use negative numbers.

A site I am currently working on with some of these techniques is here - http://hitest.leswarren.com  

I learned a lot about the DOM here:

http://www.guistuff.com/  in the tutorials section.

I have been finding some good info and ideas here:

http://www.positioniseverything.net/ although I feel I have to take some of it with a grain of salt.

I hope this can help you some. Am anxious to see how your solution works out.

Cheers

Thank you for your further input.  That "Holy Grail" article which Kelsey referred me to seems to be just the ticket!  I'm going to try that first.  If it works, then I'll base much of my future layouts on the article because it provides a solid reasoning behind the approach to make adjustments to effect all kinds of different layouts.

Robert

P.S. For those of us old enough to remember the pre-Internet days it's quite marvelous being a software developer nowadays!!

Quick Update: That Holy Grail article is excellent except that it doesn't work in IE7.  I'm nowhere near the expert to understand how to fix it.

Robert 

Well folks, I went back to basics and built my own version of a 3-column layout.  Then I adopted Adam McIntyre's Javavascript code to keep the column heights the same.  You can read more about it here and download the same project too.  The one thing I can't figure out is why, in Firefox 2.0 only, the container's background colour doesn't appear when the middle column doesn't extend all the way to the bottom.

Robert W.