make side column same height of content

[mgason]

Hi,I have a common setup, header, left column, main content area and footerThe main content area could vary in size depending on the amount of text.How can I make the column which has a background color always reach all the way down to the footer top border.That may all make sense if you take a look http://gasolicious.com/celebrate/thanksMark

[jeffman]

The challenge is to make #left-primary as tall as #container. You could do that with JavaScript. Another way of thinking about it is to make the background of #container the color you want for #left-primary, and then make the background of #container white (it is currently transparent). The following additions to your CSS will do the job:Add these CSS rules to #mainoverflow:hidden;background-color:#7996a4Add this rule to #containerbackground-color:#fffThe overflow rule is required because the content of #main is floating, so #main currently has no height. The overflow rule gives it the height of its contents.The problem with this is that #container now overlaps the lower border. I've had a chance to look into that now, and the next post explains the cause and a solution.

[jeffman]

I located the mysterious border. The following rules are defined in twentyten/style.css

#colophon {	border-top: 4px solid #000;	margin-top: -4px;	overflow: hidden;	padding: 18px 0;}

It's the negative margin-top that causes the overlap I mentioned above. Setting it to 0 fixes the problem.

[mgason]

Hi,first thanks for the excellent, clear reply.I did what you suggested but even as I was doing it I saw this next problem coming.First the original problem was solved as you said the blue left column is the same height as the content.But......I was using the overflow:visible on #main to allow the circular png files to overlap onto the background.The #big-right-image which contains the circle images is only 54px wide.with your change I have cropped images, or if I change it back, white extending out behind the images.http://gasolicious.com/celebrate/you may notice this problem is only on the front/home page. I do not use the left blue area anywhere else so I set overflow on #main to visible and just set it hidden for the home page

#main {	padding:0 0 0;	overflow:visible;	background-color:#fff;}.home #main {	overflow:hidden;	background-color:#7996a4;}

Any ideas how to fix my home page? By the way the home page is default template, the other pages with circle images use a different template. Both have the div big-right-image as it pulls from a custom field in wordpress.thanks againMark

[jeffman]

Yes, but it took a while to track down. The easy solution is to remove the image from the document flow and position it absolutely. This causes three problems:It breaks in IE7. The colorbox spills out of the perimeter. Part of it is already too wide, which you can plainly see if you look at the page on a monitor with low resolution (like 1024). If you can fix that, then you might be okay. It ought to get fixed anyway, because on low-res monitors, you get that horizontal scrollbar to nowhere effect. (The solution works fine with FF, Safari, Chrome, Opera, and IE8.)The way #container is positioned makes it difficult to align the image with respect to the right side of the wrapper. This can be corrected by eliminating that -250px margin and subtracting 250px from its width.It seems the image is adding some height to #container. Removing it from the flow causes #container now to be shorter than the blue-green stuff on the left. This allows the blue-green color to creep below #container, and that's just ugly. Adding some padding fixes the problem. I's a tacky solution, but it seems to work. You might want to play with that.Anyway, here's what I did that worked.1. I eliminated the div surround the circles image. It's not needed.2. I moved the circles image to the very bottom of the wrapper element. I added this to the tag: id="circles" so it can be referenced in CSS3. I changed these rules for #containermargin: 0 0px 0 -10px;width: 680px;padding-bottom: 20px;4. I added a ruleset for the image:#circles {position: absolute;top: 290px;right: -90px;}WordPress CSS can get pretty complicated, plus you have all that jQuery stuff going on, actually writing elements into your DOM. For these reasons, I wanted a solution that wasn't so much correct as minimally intrusive. Give it a try.

[dsonesuk]

The problem is because you require overflow: visible to show images to the right of whte page content over background of page, the main container won't surround the floated containers, within it. Normally you would use as DD suggested, use overflow hidden, but i would use the main container with background-color: white; and a background image 1 px high and with the same width and color of left column and repeat down left edge. This would adjust to which ever container content was higher, whereas DD would show the blue background below the main content area if its content is smaller than left.easy way: to get over the overflow issue add a block element at end of container elements 'container' and 'left' with style clear both; (before end div tag of main).

 <div id="main"> rest of html code... <div style="clear: both; height:0px; line-height:0;"> </div>	 </div><!-- end of main -->

then use following

 .home #main { background: #ffffff url(leftcol_bg.png) repeat-y 0 0; overflow:visible; padding:0; }  .home #container { background:none; float:right; margin:0; padding:0; width:100%; }  .home #content {  float:left;  margin:0 20px 0 280px; }  .home .entry-content { float:left; width:520px; }  .home #big-right-image { float:right; padding:0 0 10px 10px; width:1px; }  .home #left-primary { background-color:none; float:none; width:220px; }

the harder way, is to target the wrapper, and add bg image, but in doing so, you have to add a background color white to those container elements where the bg image will show through.

  .home #wrapper {background: #ffffff url(leftcol_bg.png) repeat-y 0 0;}   .home #header { background-color:#FFFFFF; overflow:hidden; }   .home #main { background:none; overflow:visible; padding:0; }   .home #container { background:none; float:right; margin:0; padding:0; width:100%; }   .home #content {  float:left; /*will place image half way across right outer edge, while removing this float will place it beyond right edge Note: check in other browsers*/   position:relative; margin:0 20px 0 280px; }  .home .entry-content { float:left; width:auto; }  .home #big-right-image { position:absolute; right:-60px; top:0;  }  .home #left-primary { background-color:none; float:none; width:220px; }  .home #footer { background-color:#FFFFFF; }