Jump to content

Equal Column Heights, Unocassional Situation


ReneK
 Share

Recommended Posts

Hello ! I have a problem with the resizing of two columns, searched everywhere but as it's quite an unocassional situation I hope I can find some help here. I'm trying to modify a WordPress template, but can't get the right bottom widget streched with the left main content column.Here a visual representation :edual-columns.jpgAs you can see, I have a left column 'Main Column' with a variable height, and at the right sidebar 2 widgets of a fixed height, and the bottom 2 ( A & B ) are both variable in height depending on their content. I want the black part of widget B stretched to the bottom of the main column for a better visual look. The left main column has it's own DIV, also the complete sidebar has, and every individual widget has it's own DIV too.My question is, is this possible in CSS only, or do i have to use JS to solve this problem, and can someone point me in the right direction ? I'm not a beginner neither a PRO in CSS, and no knowledge of JS so all your help and suggestions are highly appreciated ! I hope I can find the solution here ...

Link to comment
Share on other sites

Considering the use of the variable height of both side of the page, I would encourage you to seek a javascript solution.CSS has its limitations with respect to dynamic content. IMHO.Sorry that I don't do javascript well enough to assist.

Link to comment
Share on other sites

right.pngbottomright_col.pngtopright_col.pngtoprow.pngbottomrow.pngrough setup using above images<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">p{padding: 0 5px;}#wrapper{width: 377px; overflow:hidden; background:url(right.png) right top repeat-y;}#maincontent{width: 240px; float: left; color:#FFF; text-align:justify; background-color:#000;}#right{width:127px; float:right;}#widget1, .bottomround_right, .topround_right, #widget2, #toprow, #box_a, #box_b{width:100%; float:right;}#widget1{height: 85px;}#widget2{height: 60px;}.bottomround_right, .topround_right, #toprow, #bottromrow{height: 20px;}.bottomround_right{background:url(bottomright_col.png) no-repeat #FFF; padding-bottom:10px;}.topround_right{background:url(topright_col.png) no-repeat #FFF ;}#toprow{background:url(toprow.png) no-repeat ; background-color:#FFF;}#box_a,#box_b{color:#FF9900;}#bottromrow{width: 100%; background:url(bottomrow.png) no-repeat; background-color:#FFF; float:left;}</style></head><body><div id="wrapper"> <div id="toprow"> </div> <div id="maincontent"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <div id="right"> <div id="widget1"></div> <div class="bottomround_right"></div> <div class="topround_right"></div> <div id="widget2"></div> <div class="bottomround_right"></div> <div class="topround_right"></div> <div id="box_a"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. </p> </div> <div class="bottomround_right"></div> <div class="topround_right"></div> <div id="bow_b"></div> </div> <div id="bottromrow"> </div></div></body></html> Edited by dsonesuk
Link to comment
Share on other sites

Thank you both for your reply, and dsonesuk => a very nice solution, great input, highly appreciated ! One problem with it though, as the background of my template isn't just simple white as in my sample image, the right.png is messing it a bit up (see image below, I've marked it in red circles)cols_1.jpgI replaced both the bottom and topright col images with one single image replacing them both, together with the background like below :widget-top-bottom-filled.pngThis is of course not a perfect solution, as f.e. IE7 aligns the background 1-2 pixels different than FF or Chrome (and probably other browsers). Any idea how to make this work 100% perfect on the popular browsers ?Again, thank you all for your input, highly appreciated !

Link to comment
Share on other sites

IE has the habit of adding 1px padding/margin by default, which can fix by targeting specific element by using div {padding:0; margin: 0;} or all elements by *{padding: 0; margin:0;}, note by using this wildcard method, you will need to reset the margins for the paragraphs, and any other element that maybe affected, p{margin-top:0.9em;}.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...