div's dynamic height

[Philippe.Lahaie]

Hello, im trying to create a "gradient" border so within my container div i have the content div that takes lets say 590px out of the containers 600px. and another div next to it that takes the remaining 10px. as i add content to the content div its height expends accordingly, and so does the container's heigth since they are both floating. but my 10px large div doesnt expend although i set it's css height rule to 100% and it's min-height to 500 px, it always stays at 500px.

my question is, with 2 divs in a container div, how do i get both divs to have the same height as the container? (kinda like colums would do, but i do not want to / can't use faux columns.

ps: I have another css problem concerning this very same page but it's browser specific so I will create another thread please check it out too.

[drjohn]

try adding overflow:auto to the outer div

[lps]

Or you can try overflow:hidden;

[Philippe.Lahaie]

neither of these work, there shouldn't be any overflow from my container div since i didn't set a max-height.

the problem is really one of the 2 divs inside that does not expand verticaly to match the containing div's height even tho i set it to 100%. i believe i read somewhere that 100% refers to the browser's heigth rather than the containing div, so part of the problem comes from there.

also, according to this article and many others jsut like it, i'm not the only one trying to achieve similar effects with pure css and it seems like css just doesn't handle it that well without some tricks and hacks for a bunch of diferent browser's reactions. :(

[teedoff]

Can you provide a link to your test page? Hard to guess about code especially when dealing with images.

[Philippe.Lahaie]

Can you provide a link to your test page? Hard to guess about code especially when dealing with images.

No sorry, it is not online and it is work related also so I dont personnaly own any space where i can publish this.

From the reading ive made css just doesn't have any rule that dynamicly streches elements higher than what they need to be. You can hardcode it, or manualy set it with javascript, which is not advised but its probly what im going to have to do anyways.

i could use faux columns for one of the 2 places i need this stretch effect because the gradient will be horizontal, but the second is a vertical gradient so its impossible to recreate it with images.

When i work out the javascript for this i'll post it here for information sake but i've read in many places it's not recommended.

[Philippe.Lahaie]

well i did some reading found out about jquery and i am currently in love i think... :P

once again thank god for my good friends at w3schools

here is what i needed for setting my left side menu div's height to the height of the content div :

$(document).ready(function () {
   $("#ruban_gradientgris").height($("#contenu_publique").css("height"));
});

I'm posting this as the result to my search but be aware that manualy setting content's height with javascript is not a suggested solution from many web designing sites i've read.

[floatingDivs]

I know I'm late, but here's a pretty good technique of getting around faux columns (and reliance on JavaScript/jQuery).

http://offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/

The only downside is lack of support in IE6, but who cares?

[Philippe.Lahaie]

I know I'm late, but here's a pretty good technique of getting around faux columns (and reliance on JavaScript/jQuery).

http://offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/

The only downside is lack of support in IE6, but who cares?

seems like a good non-javascript alternative, i'm not gonna try it now but thank you, this would've been exactly what i was looking for 2 days ago :P

it seems it only works when 1 column i always gonna be higher though. which wouldn't have been a problem for my site but could be for some.

[teedoff]

I may have misunderstood your initial post. If it was faux columns you were looking for then yes there are plenty of tutorials online. I suggest you use one that doesn't rely on javascript at all. Some users choose to disable javascript in their browsers, therefore your layout would break completely for them.

[Philippe.Lahaie]

no worries, it is NOT a faux columns i needed. it's similar, the div containing my left side menu div has a gradient effect added with css, it will scale to the size of the div, but the div wouldnt scale to the content. i couldnt use faux columns because the gradient was vertical.

as for javascript it's like under 2% that dont have it. and my div would simply not extend to the content and fall back to its min-height of 500px which is still elegant. and the gradient degrades to a simple white background if the broswer doesnt support the css to make it.

[teedoff]

no worries, it is NOT a faux columns i needed. it's similar, the div containing my left side menu div has a gradient effect added with css, it will scale to the size of the div, but the div wouldnt scale to the content. i couldnt use faux columns because the gradient was vertical.

as for javascript it's like under 2% that dont have it. and my div would simply not extend to the content and fall back to its min-height of 500px which is still elegant. and the gradient degrades to a simple white background if the broswer doesnt support the css to make it.

Ahh ok. Sounds like you have your bases covered then. Good job!