CODEWITHSUNDEEP
cssmargin
Bah-Bee
Bah-Bee

Reputation: 2145

CSS width 100% - margin-right

Currently have 2 divs...left is full of content and right is a sidebar 300px wide. I'd like them to be side by side, left and right but can't seem to get it right. I need the left div to take up the whole screen less the 300px for the right div.

Is it possible to have the right div in the left divs right margin?

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

#container {
    width: 100%
}
#left {
    float: left;
    margin-right: 350px;
}
#right {
    float: left;
    width: 300px;
    padding-left: 25px;
}

edit:

Can i also have the right side position: fixed? Solutions below work, but when i make the right div position: fixed; the div is no longer to the right of the left div.

Upvotes: 2

Views: 8320

Answers (5)

DevilBoy
DevilBoy

Reputation: 43

The problem with some of the answers is that you may not want to re-order the content because you may want the ability to move the right div under the left div in a responsive design, which would get increasingly more difficult if we reorder the content. Unfortunately @DACrosby's answer can lead to some wicked overlap of the right div on top of left div's content.

My solution was to set a positive padding-right that matches the negative margin-right on the left div, and set box-sizing: border-box.

.container {
    clear:both;
}
.left {
    box-sizing: border-box;
    float:left;
    width: 100%;
    margin-right: -325px;
    padding-right: 325px;
    background:#ddd;
}
.right {
    box-sizing: border-box;
    background:#666;
    position:fixed;
    right:0;
    width: 300px;
}

This works with or without the position:fixed; right div.

jsFiddle

Upvotes: 0

Orson
Orson

Reputation: 15451

Take a look at:

Creating Liquid Layouts with Negative Margins (http://alistapart.com/article/negativemargins)

Upvotes: 0

JodyT
JodyT

Reputation: 4412

Change the right and left div order like:

<div id="container">
    <div id="right"></div>
    <div id="left"></div>
</div>

Remove the float:left from #left in your CSS and change #right to float:right

#container {
    width: 100%
}
#left {
    margin-right: 350px;
}
#right {
    float: right;
    width: 300px;
    padding-left: 25px;
}

EDIT:

My solution should work with position: fixed;, just remember to add right:0 to the fixed div.

#container {
    width: 100%
}
#left {
    margin-right: 350px;
}
#right {
    position: fixed;
    right: 0;
    width: 300px;
    padding-left: 25px;
}

Upvotes: 3

DACrosby
DACrosby

Reputation: 11460

Instead of re-ordering the content, you could just add a width:100% and negative margin to the #left div.

http://jsfiddle.net/daCrosby/FGMGB/

HTML

<div id="container">
    <div id="left">Left Col</div>
    <div id="right">Right Col</div>
</div>

CSS

#container {
    width: 100%
}
#left {
    float: left;
    width: 100%; /* full width of #container */
    margin-right: -325px; /* #right's width + left & right padding & margin */
}
#right {
    float: left;
    width: 300px;
    padding-left: 25px;
}

Edit

From your comment elsewhere here, you need #right to be position:fixed. This will take the element completely out of the stack of elements, so float is unnecessary (and wont work anyways). Instead, just set the fixed positioning and you're good to go.

Relevant CSS, using same HTML as above

#container2 {
    width: 100%
}
#left2 {
    width: 100%; /* full width of #container */
    margin-right: -325px; /* #right's width + left & right padding & margin */
    background:#ddd;
}
#right2 {
    position:fixed;
    right:8px;
    top:28px; /* set the right and top to whatever positioning you need. */
    width: 300px;
    padding-left: 25px;
    background:#444;
}

jsFiddle

Upvotes: 1

James Coyle
James Coyle

Reputation: 10428

Change your markup to:

<div id="container">
    <div id="right"></div>
    <div id="left"></div>
</div>

And CSS to:

#left {
    overflow: hidden;
}
#right {
    float: right;
    width: 300px;
    padding-left: 25px;
}

The left div will automatically take up the whole space next to the floated 'sidebar'.

Upvotes: 1

Related Questions