asked on

CSS help with making left column extend all the way to the bottom

Hello experts:

I have a relatively simple CSS page with one problem:

If the right column has more content than the left column, the left column "stops" when its content ends. I need the left column to extend all the way to the bottom no matter how long or short the right column is.

This is noticeable because the color of the left column is blue. I need this blue color to extend all the way to the bottom.

I have attached a snapshot of what the page now looks like and the CSS for it.

Any help will be greatly appreciated.

--d.

html,body{background:#EFEFDD;margin:0;marginheight:0;marginwidth:0;text-align:center;}
*html,body{background:#EFEFDD;padding:0px;margin:0;marginheight:0;marginwidth:0;text-align:center;}
a{color:#173a96;font-weight:normal;text-decoration:none;}
a:hover{color:#173a96;text-decoration:underline;}
img{border:0;}
form {margin:0;padding:0;}

#container {
	width:975px;
	background:#FFF;
	padding:0px;
	text-align:left;
	font-family:arial;
	font-weight:normal;
	font-style: normal;
	font-size:12px;
	color:#000;
	border:0px solid #BDB5A8;
	margin:auto;
}

#contentleft_second_pgs {
	width:200px;
	height:100%;
	padding:0px 10px;
	float:left;
	margin: 0px 10px 0px 0px;
	background:#173A96;
	position: relative;
	vertical-align: top;	
	}
#contentright {
	width:740px;
	padding:0px;
	float:right;
	margin: 0px 0px 10px 5px;
	background:#fff;
	clear: none;
	position: relative;
	vertical-align: top;	
	}

#footer {
	clear: both;
	margin: 0px auto;
	position: relative;
	text-align: left;
	}

Open in new window

page-visual.gif

vanauden

I'm no t a CSS expert, but this page provides some alternatives: http://www.ejeliot.com/blog/61

Peter Kirubakaran

if you want the left column to have its height always till the bottom of the page then specify a fixed height instead of 100% or else specify a fixed height for your container and then keep the height of left to height:100% (cos u need to have a fixed height from which it can take a 100% of it)

driven13

ASKER

Thank you both for your responses.

Specifying a fixed height either to the containerorto the left column is not an option as there is bound to be unwanted empty space at the bottom when the content moves up or down.

Anyone else have any other ideas? Or examples?

Surely this is something that folks come across all the time.

Thanx,

--d.

santanu30in

Hi driven13,
You can create table and place the two part into two <td>.
Set style="background:blue" in the left <td> .
Then two columns become equal.

ASKER CERTIFIED SOLUTION

zac_charles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

zac_charles

Please also note if you want the whole thing to shrink past 100% of the page height you need to change height to auto in #contentleft_second_pgs.

Zac

#contentleft_second_pgs {
            width:200px;
            height:auto; /*changed*/
            padding:0px 10px;
            float:left;
            margin: 0px 10px 0px 0px;
            background:#173A96;
            position: relative;
            vertical-align: top;
            margin-bottom: -99999px; /*Added*/
            padding-bottom: 99999px; /*Added*/
     }

Open in new window

Chris Stanyon

I often 'cheat' if doing something like this and use a background image to give the illusion of columns.

In your case, create an image that's 10px deep and 975px wide (the width of your #container). The left most 200px of your image should be the colour of your left column, and the rest should be the colour of your right column.

Then add a property to your #container rule, something like

background: url(background.gif) repeat-y;

The 'columns' will then fill #container, no matter which column is the longest. I think it's been referred to by some as 'faux columns'

driven13

ASKER

zac_charles:

Thank you for the solution.

It is almost working.

Check out the attached picture to see how it is showing up now. The footer div needs to be under the main columns.

I have added the actual code from the bottom of the page. The CSS for the footer is in my original posting. Can you tell me what I am doing wrong?

Also, when you changed the height to auto for #contentleft_second_pgs I did not see any changes to tha page. What should I be looking for?

Thank you for your time.

--d.

<div id="footer">

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr valign="top">
<td style="background-image:url('/images/bottomline.jpg'); background-repeat:repeat-x;">
<img src="/images/spacer.gif" height="20" />
</td></tr></table>


<center>Copyright &#169; <%=Year(Date)%> The Strike<br /></center>
<br><br><br><br><br><br>

</div> <!-- End div footer -->

</div> <!-- End div container -->


</BODY>
</HTML>

Open in new window

snapshot2.gif

zac_charles

Hi,

I'm just having a look at the footer issue but I'll answer your other question first. Changing the height rule to auto will only be noticeable if you remove some of the test data from the right column. In my sample code just remove a few of the "line <br />" lines. It should make the whole thing shrink up instead of just being page height with empty space.

Zac

driven13

ASKER

Thank you zac_charles.

Sometime my ignorance gets in my way.

The footer issue is the only thing left to be fixed.

Regards,

--d.

zac_charles

Because of the way the stretchy left column works it actually goes behind the footer. Since your footer has no background you can see it. It looks like while is your solid colour so just add background-color: #FFF; to the footer.

That combined with having auto height on the left column has given me the right look. Let me know if it works for you. If not we'll work it out :)

Zac

driven13

ASKER

zac_charles:

That worked!!

I apologize for this but I have one more follow-up request.

If you look at the attached picture (from a different site) you will see how the footer extends all the way from left to right outside the two columns.

How do I get this to do the same thing on my site?

Thanx again,

--d.
footer.gif

zac_charles

Hi,

This one is easy. Just take the footer DIV out of the container DIV. It will then go to the edge of the page instead of being constrained by the container.

Zac

driven13

ASKER

Yes that worked but the color of the background is still the off-white/cream and I want that to be white.

I have attached a snapshot.

I tried "re-coloring" some of the divs but I have no idea what I am doing...[:0(

--d.
footer2.gif

driven13

ASKER

Sorry I meant I want the color of the background UNDER THE FOOTER to be white.

Speed kills.....[:0)

--d.

zac_charles

Hi,

The off-white colour there looks to be the background colour of the actual page. I'm going to guess that the amount of content you have in there doesn't push the blue and white columns out the bottom of the page and make the browser scroll? Adding content will push the footer down against the bottom of the page, otherwise there isn't a way to get it down there without blank space. If you don't have enough content to push it down and you really want it down there, set height: 98% in the left column. Best idea is to not worry about it till you get real content.

Zac

zac_charles

Hi,

You can fix it actually.

Change the top two lines to this:

html,body{background:#FFF;margin:0;marginheight:0;marginwidth:0;text-align:center;}
*html,body{background:#FFF;padding:0px;margin:0;marginheight:0;marginwidth:0;text-align:center;}

This will make the entire background white.
Now to emulate the off-white colour where you want it, create a new CSS rule as follows:

#wrapper {
background:#EFEFDD;
width: 100%;
}

and simply add <div id="wrapper"> around the container DIV. Make sure you don't put it around the footer.

Zac

driven13

ASKER

lol. Yes, that is exactly what I did. For once, I thought like you did.

This is what my css looks like:

#wrapper {
      width:100%;
      height:100%;
      background:#EFEFDD;
      padding:0px;
      border:0px;
      margin:auto;
overflow: hidden; /*Added*/
}

zac_charles

Hi,

Just remove the height:100%; from that or it won't look right. Only the background: #EFEFDD is actually needed. Even the width is overkill.

Zac

driven13

ASKER

zac_charles:

It is all working like I need it.

Thank you SO much for your time and your patience.

Warm Regards,

--d.

driven13

ASKER

Absolutely one of the best. You would be lucky to get him to help you. Thank you for your patience.