CSS: how to layout 3 columns, 2 are optional


Tags: css

Problem :

Say I have something like this:

<div id="content">
   <div id="main_content"></div>
   <div id="profile_sidebar"></div>
   <div id="sidebar"></div>
</div>

I want the content to appear in the follow order (left to right): profile_sidebar, main_content, sidebar. I'm trying to float:left profile_sidebar and float:right sidebar -- but it's not showing up as I hope.

Also, profile_sidebar and sidebar are both optional. They may not appear on the page.

UPDATE 1: I've updated the content to be like this:

<div id="content">
   <div id="profile_sidebar"></div>
   <div id="main_content"></div>
   <div id="sidebar"></div>
</div>


Solution :

I don't believe you can achieve this using just floats without changing the structure, but then it's easy. I imagine that's not an option?

Edit This illustrates jmbertucci's position:absolute work-around, and the potential problem.


    CSS Howto..

    How to draw the following shape using CSS3 [duplicate]

    How to manage text breaks in span using js, css or anything else

    How to make CSS input range thumb not appear at first

    How do I make my django app load content as I scroll?

    how to decrease space between headings?

    How can i overlap inline divs?

    How can I add a hover effect to icons with CSS? [closed]

    Divs are overlapping, how to fix? CSS

    How to prevent right-to-left text appearence while using arabic language?

    How I do edit the css for just the home page on Magento?

    How to reference / link to a Css-File styling elements in a webview for Android

    How to make a div fill the entire page height using css? [closed]

    How to use css for the hover effect in another div?

    How to keep div same height at all times

    How to make device width-height based html & css via PhoneGap

    How to make a border which wraps around text

    How to center two columns using CSS?

    How to apply Css class to a row using datatables.js?

    How to Assemble HTML,CSS and JS with EachOther

    How do I return the box height to original state when clicked again in JQuery?

    How to switch visibility of an HTML div in css for overlaying

    How to add javascript expression's output to my CSS?

    How to make a frame around CSS component from a picture source

    How can I join background images?

    How to make image stretch to a specific paragraph?

    How to fix a div below the header after scrolling it up?

    How to adjust table or content in CSS when printing?

    Greasemonkey: How to do something when style=“display: none;” changes?

    how to diplay two html elements seemlessly

    How can I zoom this gallery without moving the other pictures?