[Solved] Percentage based dimensions with max / min

[Jerba]

I’m trying to build what is, in my mind an incredibly simple layout, but I’m having some trouble getting it to work…

http://codepen.io/Responsive/pen/wKvEXZ?editors=110

Below is the HTML structure I figure make sense…

.app-container
|_ .navigation (left grey nav)
|
|_ .content (everything to the right of the navigation)
|_ .content-navigation (white nav)
|_ .content-inner (text area)

I’m trying make it so the height of the content-inner based on the text / content in it, will manipulate / increase the height of the left navigation and the app container as it goes, but making sure the height of the app container doesn’t go below 100%… If that makes any sense at all…

So in short, the left navigation and app container will resize to the height of the content-inner div…

I feel I’m overlooking something incredibly straightforward or over complicating this…

Thanks for any feedback!

[josh]

You can use the CSS display property and table/table-cell values to achieve your desired result. Here is a fork of your code: http://codepen.io/joshnh/pen/9c9abe74b4c20dbe51d22abbc10fe777/

Here is a simplified example: http://jsfiddle.net/joshnh/ubf3F/1/

[Jerba]

<backquote>
You can use the CSS display property and table/table-cell values to achieve your desired result. Here is a fork of your code: http://codepen.io/joshnh/pen/9c9abe74b4c20dbe51d22abbc10fe777/

Here is a simplified example: http://jsfiddle.net/joshnh/ubf3F/1/
<\backquote>

Thanks!

[Author]

Posts