Jump to content

Stretchy Sidebars


chibineku

Recommended Posts

I have adapted The Hole Grail three div layout into my site and it's working ok (except in AOL, but...well, I'll deal with that later...) but I want the left and right divs to extend to the bottom, whether or not they have enough content. Does anyone know how? Here is the page:http://www.sinaesthesia.co.uk/threecol.php5Here is the HTML:

<body onload="prep()"><div id="wrapper"><div id="outer"><-- menu is here --></div>	<div id="container">  <div id="center" class="column"><p>Lorem ipsum etc.</p></div>  <div id="left" class="column"><p>Lorem ipsum etc.</p></div>  <div id="right" class="column"><p>Lorem ipsum etc.</p></div> </div></div></div><div id="footer">All content, scripts and images © J Scott 2009 |<a href="mailto:chibineku@aol.com">Contact the webmaster</a></div></div></body></html>

And the CSS, which is pretty big, so I'll just copy the relevant parts here:

body {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#FFFFFF none repeat scroll 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:80% !important;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;margin-left:5%;margin-right:5%;}#container {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#9BD9E0 none repeat scroll 0 0;padding-left:200px;padding-right:190px;position:relative;}#container .column {float:left;position:relative;}#center {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#FFFFFF none repeat scroll 0 0;padding:10px 20px;width:100%;}#left {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#9BD9E0 none repeat scroll 0 0;height:100%;margin-left:-100%;padding:0 10px;right:240px;width:180px;}#right {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#9BD9E0 none repeat scroll 0 0;margin-right:-100%;padding:0 10px;width:130px;}* html #left {left:150px;}#container .column {padding-top:1em;text-align:justify;}

My footer has clear: both, btw.Any help would be great - it just looks much neater with columns all touching the bottom.

Link to comment
Share on other sites

if you wish to do this to make the side bar background colour extend to the bottom, the best option would to use a repeating background image in the wrapper the total width of wrapper, with required side bar colours which produce the same look.other option, which i used to use, was javascript + dom to identify the total height of container of sidebars, and then assign an identical height to those side bars.Note: mismatch of closing div tags on example provided.

Link to comment
Share on other sites

Hiya. Because the center column is fluid, the image solution isn't going to work, so I will use the JavaScript solution - and those with it turned off can live with the uneven column heights. Cheers :) Btw, see my JavaScript thread about the new problem - the new function killed one that was working fine (killed it everywhere except FF, that is).

Link to comment
Share on other sites

Just adding a background color to wrapper fills in the sidebars, but it also extends up over the top of the navigation. I will work on that, but any ideas, short of adding a new div, would be appreciated. I may have to increase the margin on the bottom of the breadcrumb bar and then give the wrapper div some bottom heigh, to bring it up into the margin space.

Link to comment
Share on other sites

Man, that couldnt have been easier: i already had another div wrapping it all, called wrapper, which wasn't having any impact on the header and breadcrumb divs, so i just moved it under them, wrapping the container div. everything seems cushty (do you know that word? lol).

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...