CODEWITHSUNDEEP
css
StackOverflowNewbie
StackOverflowNewbie

Reputation: 40643

CSS: how to layout 3 columns, 2 are optional

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>

Upvotes: 0

Views: 114

Answers (2)

albert
albert

Reputation: 8153

this jsfiddle does what you request; i did have to add sizes, (negative) margins and padding, so clearly it's not perfect, but it does rearrange the content display. imo position absolute or fixed would be ideal here, @ least for the side columns. check it out: http://jsfiddle.net/jalbertbowdenii/Zc7ds/26/

Upvotes: 1

mkjeldsen
mkjeldsen

Reputation: 2180

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.

Upvotes: 0

Related Questions