Reworded.

[Anonymous]

I’ve reworded the question.

[Paulie_D]

You’re going to hate me but I wouldn’t code it quite like you have.

Within the container, I would have two ‘master’ divs (one for the sidebar area and the second for the content)

See something like: http://codepen.io/joe/pen/vygft

[Anonymous]

Updated the code to have two divs as you suggested, since that does make sense. I must still be missing something because the dark gray content area is still not going the full height of the page, even though the div wrapping both sides is set to min-height: 100%.

[Paulie_D]

Have you set the body, html & ‘wrapper’ to 100% height (not min-height)?

[Anonymous]

Yes, the reset always had :

html, body { height:100%; }

If I change the container (wrapper) from min-height to height, no change occurs. If I then add _height: 100%_ to _#bside_ then it goes the full height BUT if the content in bside goes beyond the height of the browser, no scroll occurs so it just isn’t displayed. Not what I need.

[Paulie_D]

Ah…well that’s a different issue.

[Anonymous]

Setting #bside or #contentframe to _position: absolute_ has the same effect. Looks right but doesn’t function properly.

[Anonymous]

That doesn’t seem to solve what I’m asking at all. Again, the reset in the CSS already has body and html set to height 100%

[Paulie_D]

@jurotek

The line-height was merely a placeholder to centre the text in that specific codepen. I would never use it like that IRL.

[Paulie_D]

Discussion moved to: https://css-tricks.com/forums/discussion/21110/help-with-equal-height-columns-in-fluid-width-css

[Author]

Posts