Fluid content div with optional sidebar.

Question

Hello, I have a question that I haven't found addressed in the various CSS layout models I've looked at, so I thought I'd post it here.

I'm working on a site that uses a basic fluid/fixed two-column layout. The content of the site is in the left div, and the sidebar in the right. The sidebar has a fixed width of 200 pixels or so, and the content expands to fill out the remaining width of the parent.

Here's what the code looks like:

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
   <div style="margin-right: 200px;">Content goes here.</div>
   <div style="float: right; width: 200px;">Menus goes here.</div>
   <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

This is a pretty standard approach and works fine for the most part, but the issue is that the design of the site requires the sidebar to only appear in certain cases. All of the HTML is generated through PHP, and the "get-content()" function doesn't know whether the "get-sidebar()" one will be called or not.

When the sidebar is called, I'd like the content to expand out to fill the parent div while leaving enough room for the sidebar. If there is no sidebar, the content should expand out to fill the entire width of the parent.

Is there any way to do this with CSS -- perhaps using "auto" for the content margins -- without relying on PHP/JavaScript?

Answer 1

Instead of floating the sidebar, try this:

#sidebar {
  display: inline-block;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}

Answer 2

Would it be possible to add a class to the body using PHP? Something like "one-col" or "two-col" depending on the context. Then you can give the content div a margin when there is a sidebar, but not when there isn't.

Answer 3

You might consider doing it like this:

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
    <div style="background-color:#CCC;height:100%;">
     <div style="background-color:#444;float: right; width: 200px;height:100%;">Menus goes here.</div>
     Content goes here.
    </div>
    <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

By doing it that way, the menu sits inside the main div and there is no margin-right, so when the menu goes away, the text expands to fill the space.

The "height:100%;" ensures that the menu and content boxes stretch to the same height. You could also set this to a pixel or em amount or a percentage less than 100 if you want.