Left blue column 100% not working or can't figure it out

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


The blue column on the left side of the page needs to be 100% in length. I
have this in the left div:    margin: 0;
    padding: 0;
    background: #E2E8EB;
    float: left;
    width: 149px;
    height: 100%;

In Firefox the column ends where the text ends. In IE it is there but it's
about 150% in length causing a scroll bar on the right I don't want.. I've
tried several combinations and can't figure it out. I Appreciate any
feedback or suggestions.


Re: Left blue column 100% not working or can't figure it out

This isnt as easy as you would expect, but I will try and point you in
the right direction.

You need to put your left and right divs in a container div.  Next you
need to put another div in the new container div, below your left and
right divs.  The bottom div needs to be "clear: both;"  This will get
your container div to stretch to the size of the longest column.  After
that, you need to create a background image that has your blue column
in it.  Put the background image on the container div.

You think it would be easier, but its not.  You basically have to fake
it with the background-image.  Hope that at least gets you moving in
the right direction!


Re: Left blue column 100% not working or can't figure it out

Quoted text here. Click to load it

Thanks for the insight Adam. Definitely not as easy as you'd think. You
would think if your wrapper had the background you wanted and a 100% height,
it would work.

After reading what you wrote I decided to go another way. I used the left
blue column as my body background and the top 3 colors as backgrounds at
100% width for those divs. That worked for this site, but I will have to use
the process you wrote about in others.

Thanks for your help,

Site Timeline