CODEWITHSUNDEEP
csshtml
Svenn
Svenn

Reputation: 111

html css layout. Fixed total width, 3 columns, dynamic middle column

Is this at all possible?
Sometimes the left menu is not there, so i want the middle col to take up that space too.
Sometimes the right menu is not there, so middle should take its space too.
All should be wrapped in a container with fixed width (1000px).

Upvotes: 2

Views: 2856

Answers (4)

Fabian Fritz
Fabian Fritz

Reputation: 390

I'm assuming you can predict on server-side, whether a menu will appear or not, so you could just insert fixed width in your template, which saves you from any css-hacks.

Upvotes: 0

Yi Jiang
Yi Jiang

Reputation: 50165

ALA has a old but brilliant answer that I believe could solve almost any similar question: http://www.alistapart.com/articles/holygrail/

Of course the problem's with the details: Do you want the contents in the middle column to resize based on the available space, or float up side-by-side to occupy the extra space. Adding to that complexity may be elements that are unstretchable (images, etc.), some that have a min- and max- width (paragraphs of text have a certain optimal range of widths for readability). Like I said, the devils in the detail - details which it seems only you possess at this time. With these much information this is all we could provide.

Upvotes: 2

Shawn Steward
Shawn Steward

Reputation: 6825

You'll probably want to look at how to make equal height columns.

Also on this site, the author provides "The Perfect 3 Column Liquid Layout."

Upvotes: 0

twerq
twerq

Reputation: 528

That can be done with ahem table-based layouts. Using floats, I believe you need to use some sort of logic to set the width of your middle column. This can likely be done in a single line of jQuery (test if the left column is present or empty, reset middle column width), if you don't want to do it on the backend.

Upvotes: 0

Related Questions