mare 0

Seriously, how hard does this have to be still, now in 2011 with HTML5 and everything? What I need is two column layout, left fluid, right fixed to say 200px, between them 50px of margin and, and this is important, when the right fixed column is not displayed (either server does not render it or we have display:none in place) the left column should expand to take the right column's space.

Currently I have this (I've used inline CSS to make it easier to post this question):

<aside style="float: right; width: 200px; margin-left: 30px">
    Right col
    Left col

Now this solution has few issues: 1. while it does work as fluid when the container is resized, it does not however expand to the right when right column is hidden (obv coz of margin set), 2. code is semantically wrong because it requires me to put the right column in front of (or above) the left.

I actually didn't have the need for this kind of layout for some time but now I've got this site that has huge amounts of text on most pages but the right sidebar only on some and on those that don't have it we would, of course, like to use all of the available space.

UPDATE: I've modified the code a bit to include the left margin on the right column rather than the right margin on left column and it is kinda working now..still the issue 2 remains.

2 answers


Excuse my ignorance here, but if you're coding the pages without the side bar (either by hand, or programatically) why don't you add a class to the container so that when the sidebar isn't present you have a style that applies an appropriate width to the left col section?

e.g. styles for body.sidebar and body.nosidebar

and in your simple example, float them both left and have them in the correct source order.

Answered over 8 years ago by Tony Crockford
  • Hey, thanks for the suggestion. That was on my mind too but somehow I thought there's another way. Because this is a matter of content flow which should work without custom classes and workarounds. mare over 8 years ago
  • But I'm confused - you have to code the sidebar out, it's a teeny tiny step to account for that in the css. Tony Crockford over 8 years ago
  • It is tiny but it's still one redundant if...else they could be avoided. mare over 8 years ago

There's going to be some redundancy whatever you do I think. You can get the behaviour you want with display: table-cell with a few caveats, first of which is that you need to add a wrapper element to get this to work:

div { display: table; padding: 10px 0; width: 100%; }
div > section, div > aside { display: table-cell; }
div > section { width: 100%; }
div > aside { min-width: 200px; padding-left: 50px; }

The other issue is that margins no longer apply so you'll have to setting for either padding (as above) or a transparent border to get the 50px spacing you want.

Answered about 8 years ago by Rob Crowther