/    Sign up×
Community /Pin to ProfileBookmark

Stretch height to that of container

Copy linkTweet thisAlerts:
Oct 14.2008

I’ve been trying to get a div to stretch to the height of it’s container and I got nothin’. This has stumped me on other projects as well, and this time I can’t avoid fixing it. Here’s a link to a page with the problem:
[url]http://birchstudiodev.com/Lincoln/news.php[/url]

You can see the stylesheet here:
[url]http://birchstudiodev.com/Lincoln/style.css[/url]

I also use the YUI CSS reset stylesheet, here:
[url]http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css[/url]

The “News” on the right side is working perfectly, except that I need its div (id=”news”) to stretch to the height of its container (id=”content_box”). Super creative id values, I know.

Any help will be greatly appreciated.

Frank

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriOct 15.2008 — Short answer is "you can't"...

A percentage height can only relate to the SET height of the parent - even though you have set the height of #content_box and #main to 100%, the height of the overall parent #container is not set, so the 100% heights all default to "auto".

Easiest way is to use a right-aligned repeated background image on #content_box to provide a "faux column".
Copy linkTweet thisAlerts:
@FrankTheTankauthorOct 15.2008 — Thanks for looking into my code so deeply - I must have 100 nested divs. So for future reference, if I want a div to stretch to 100%, I need to set a pixel height for some container of that div to a specific value?

Thanks!

Frank
Copy linkTweet thisAlerts:
@CentauriOct 16.2008 — Basically yes. The units don't have to be pixels, but it does need to be a specific value set with the height property. The value can be % as long as the next parent up has a set height.
Copy linkTweet thisAlerts:
@FrankTheTankauthorOct 16.2008 — I was able to get it to work by setting the height of the next container up to 100%, so that all the containers were set to 100% height. Too bad that broke the layout altogether.

In the end, since that wasn't an option, I wrote a little script that calculates the height of the container next to the news and sets the height of the news accordingly. The background probably would have been simpler but I got sucked in to the scripted solution. ?
×

Success!

Help @FrankTheTank spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...