Let's say I want to have two columns. The right one is 200px wide, and the left one just takes up the remaining width. Is this possible? What do I set the width of the left column to be?
4 Answers
Update: Solved Using Flexbox
Now that we have Flexbox (with over 95% support globally) this layout (and others) can be easily achieved without styles being dependent on source order.
Flexbox Example:
HTML
<div class="flex-container">
<div class="flex-column"> Big </div>
<div class="fixed-column"> Small </div>
</div>
CSS
.flex-container {
display: flex;
}
.flex-column {
flex: 1;
}
.fixed-column {
width: 200px;
}
Live Demo using Flexbox
Solved Using Floats
The trick is matching the remainder column’s margin to the floated sidebar’s width. Remember, source order matters when using floats, so we make sure the floated element comes first.
Example right-aligned small column:
HTML
<div id="Container">
<div id="RightColumn">Right column</div>
<div id="LeftColumn">Left column</div>
</div>
CSS
#RightColumn {
float : right;
width : 200px;
}
#LeftColumn {
margin-right : 200px;
}
Live Demo
-
Could there be a solution that the order of the HTML code is
LeftColumn
thenRightColumn
(where the right column is fixed)?– tonNov 11, 2012 at 18:13 -
You float
the left column and set margin to minimum of the width of the left column.
<div id="Container">
<div id="LeftColumn" style="float: left; margin-right: 200px;"></div>
<div id="RightColumn" style="float: right; width: 200px;"></div>
</div>
OR
<div id="Container">
<div id="RightColumn" style="float: right; width: 200px;"></div>
<div id="LeftColumn" style="margin-right: 200px;"></div>
</div>
-
I think you did it backwards to how I posted it... surely you mean to give the right column the fixed width and the left one the margin?– mpenAug 25, 2010 at 17:19
-
-
Actually, you broke it ;) The right column is nudged down below the left now. Adding
float:left
to the left col too seems to fix the issue. jsfiddle.net/4k9Fj– mpenAug 25, 2010 at 19:32 -
Check your link, and my update. You can use the same code but switch the order of columns in HTML. My mistake. Aug 25, 2010 at 21:12
-
Actually, none of these solutions work really well w/ a background jsfiddle.net/bgBXM I need the div to actually expand to take up the full space.– mpenAug 25, 2010 at 21:32
If you don't want to float divs, you can do the following:
.rightDiv {
position: absolute;
right: 0;
width: 200px;
}
.mainDiv {
position: absolute;
left: 0;
right: 200px;
}
-
I don't mind floats actually. I think you need to wrap these columns in a container that has
position:relative
in order to have the columns relative to the container, rather than the page, no?– mpenAug 25, 2010 at 17:22 -
1@Mark: You don't have to have the columns in a container unless you want to limit the overall width of the page (i.e., not let it expand and contract with the width of the browser).– RobustoAug 25, 2010 at 19:09
Yes, it is possible. Set the right column's style to float: right and width: 200px, and the left column will be the content and take up the rest of the width.
-
3Don't forget to set the margin of the right part to 200px to, otherwise your text will get under the left column if it's shorter. Aug 25, 2010 at 16:47
<table>
or<div>
<div>
. Tables don't give you attitude, but the purists would eat me alive.<div>
... so before I answered I wanted to clarify...