2

I found an answer here that addresses what I need to do, but it doesn't seem to work perfectly for me. I have sidebar divs floated left and right. I want to stick a div in the middle and fill the space. The technique in that answer works for the left div, but it pushes the right div down to the next line. I threw up a quick demo on CodePen to show the problem.

Can anyone suggest a way to fix this so that all the divs are on the same line?

Update: I realize I could do this easily using percentages for all the div widths, but I really need to maintain static widths for the sidebars.

Community
  • 1
  • 1
raddevon
  • 3,290
  • 4
  • 39
  • 49
  • @Stigma I don't mind that at all. If you'll post your link as an answer, I'll give you credit. Also, could I ask what you the `zoom` and `overflow` properties do for this fix? It seems to work without them, and `overflow: hidden` scares me a little bit. ;-) – raddevon Sep 11 '13 at 20:55
  • Check out the [CSS layout demos](http://www.dynamicdrive.com/style/layouts/) on Dynamic Drive, specifically [this one](http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/) – aaronburrows Sep 11 '13 at 20:55

2 Answers2

3

One way to do this would be changing the order of your HTML (placing the right sidebar before the left)

<div class="page-grid">
    <div class="sidebar right">
        <div>Right Widget 1</div>
        <div>Right Widget 2</div>
    </div>
    <div class="sidebar left">
        <div>Widget 1</div>
        <div>Widget 2</div>
    </div>
 <div id="content">Content area</div>
</div>

http://codepen.io/anon/pen/kHmjd

Stigma
  • 272
  • 2
  • 10
1

This is using an example from Dynamic Drive's CSS Layouts

I like this one, especially because it preserves the order of the content semantically. Main content is delivered first, followed by both side columns.

HTML

<div class="page-grid">
    <div id="contentwrapper">
        <div id="content">Content area</div>
    </div>
    <div class="sidebar left">
        <div>Widget 1</div>
        <div>Widget 2</div>
    </div>
    <div class="sidebar right">
        <div>Right Widget 1</div>
        <div>Right Widget 2</div>
    </div>
</div>

CSS

#contentwrapper {
    float: left;
    width: 100%;
}
#content {
    margin: 0 15em;
}
.sidebar {
    float: left;
    width: 15em;
}
.sidebar.left {
    margin-left: -100%;
}

.sidebar.right {
    margin-left: -15em;
}
aaronburrows
  • 994
  • 4
  • 16