I need 100% height for div

[Martin C++]

I have a content div that may very likely be shorter than sidebar div. They are both wraped in div with ID of "container". I need the content div to automatically change its height to be same tall as the sidebar. I included an image too.

Regards

[Philippe.Lahaie]

do you mean "at least as high as the sidebar" or "EXACTLY as high as the sidebar" ?

if "at least" then is sidebar fixed height or dynamic?

if fixed then i suggest : css , min-height

else javascript/jquery is gonna be needed to dynamicly fix height (if its not already taller)

if "exactly"

then javascript/jquery is pretty much you only option...

heres a few other suggestions but it might not work for all scenarios or background type.
i myself had to go the jquery way to create a css gradient on my side bar, that was as tall as the content pane next to it. (here)

otherwise :
very clever but somewhat hard to follow
faux columns

[Martin C++]

very clever but somewhat hard to follow

This would normally do the trick and this is a very clever technique which I will bookmark and thank you for sharing this with me, but in this case it cant be done cause in fact my sidebar doesn't have a background. It uses body background. I guess I have to use javascript help although I dont really want to trust javascript with so important task as it is layout. Thanks anyway, useful post.

[dfxgrid]

I have a content div that may very likely be shorter than sidebar div. They are both wraped in div with ID of "container". I need the content div to automatically change its height to be same tall as the sidebar. I included an image too.

Regards

Can you post a link to your website or paste your code here? I can take a look, but it differs on how you have it structured.

[Martin C++]

Can you post a link to your website or paste your code here? I can take a look, but it differs on how you have it structured.

I cant post link cause I m developing it in my localhost.

And in addition to my last post that javascript doesnt do the trick either. Atleast not at my knowledge of it, cause I have implanted a facebook widget on my site and it loads itself with a bit of a delay, so the script doesnt get adequate height of the container. Also I a possibility to scroll through different tabs in the module so the height of the sidebar changed even after the document has loaded, so I would need a script that constantly check container height. I was thinking on loop, but I m worried it would make the page very slow.

This the general structure of the code, ofc inside of them there is dynamically generated content.

<div id="container">
<div class="post-wrap"></div>
<div class="sidebar right"> </div>
</div>

And CSS that is applied to them atm

#container{width:1000px; margin:0 auto;padding-top:20px;}
.post-wrap {background:#FFF;border:1px solid #DDD;border-bottom:none;padding:10px 15px 10px 15px;width:640px;float:left;min-height:470px;height:100%;}
.sidebar {float:left;width:300px;color:#6E6E6E;}
.right {float:right;}

Theres more style attached to them but only this is relevant regarding the divs.