CODEWITHSUNDEEP
css
raddevon
raddevon

Reputation: 3360

Fill the horizontal space between left and right floated elements

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.

Upvotes: 2

Views: 2243

Answers (2)

aaronburrows
aaronburrows

Reputation: 1020

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;
}

Upvotes: 1

Stigma
Stigma

Reputation: 272

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

Upvotes: 3

Related Questions