CODEWITHSUNDEEP
htmlcssmultiple-columns
Hughes
Hughes

Reputation: 1055

Two column same height nested in another two column same height

I'm working on a MVC application and am having some trouble with the HTML/CSS layout in regards to one of the partials that we have.

The shell of the application contains two columns that expand to be the height of the column with the most content. The left column contains the navigation for the app. The right column is the content area.

I've managed to get this part working appropriately.

Where I'm having issues is that inside for some pages, the content area (right column) needs to be split into two columns. I need both of these columns to dictate the height of the content area, which in turn would dictate the height of the main navigation.

Any input would be incredibly useful! Thanks!

enter image description here

EDIT I got it working, but am not entirely happy with the solution. It requires me to use inline-block, which reads white-space. As a result I used the comment across two lines strategy, but I'm afraid that this would get deleted by somebody while editing/cleaning the project up after the fact.

http://jsfiddle.net/StSmith/RzKJX/

.

Upvotes: 0

Views: 61

Answers (1)

Pat Dobson
Pat Dobson

Reputation: 3299

I'd imagine that, if you simply added the columns they would automatically fill the space up thus dictating the height of 'content'.

However, if you're floating the columns then the containing element won't pick up their height. In this case you'll need to add, either a cleared element below the columns, or, better add 'clearfix'.

Upvotes: 1

Related Questions