ReneK Posted September 21, 2009 Share Posted September 21, 2009 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 :As 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 More sharing options...
jlhaslip Posted September 21, 2009 Share Posted September 21, 2009 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 More sharing options...
dsonesuk Posted September 21, 2009 Share Posted September 21, 2009 use a background image in a wrapper or container, position it right, repeat-y, which will give an illusion that the 'b' box extends down to the bottom.To show the 'b' bottom round corners, the bottom row should contain the rounded bottom edges of the main combined with the 'b' box. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2009 Share Posted September 21, 2009 rough 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> Link to comment Share on other sites More sharing options...
ReneK Posted September 21, 2009 Author Share Posted September 21, 2009 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)I replaced both the bottom and topright col images with one single image replacing them both, together with the background like below :This 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 More sharing options...
dsonesuk Posted September 22, 2009 Share Posted September 22, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.