Problem
My request is simple: two columns, one of which has a defined size. Unfortunately, neither stackoverflow nor Google could provide me with a viable answer. When I apply each of the solutions mentioned there to my personal situation, they all fail. The current solution is as follows:
div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;
}
#content {
margin-right: 265px;
}
#right {
float: right;
width: 225px;
margin-left: -225px;
}
#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;
}
<div class="container">
<div id="content">
fooburg content
</div>
<div id="right">
test right
</div>
</div>
With the above code, I got the following:
|----------------------- -------|
| fooburg content | |
|-------------------------------|
| | test right |
|----------------------- -------|
Please give me some advice. Thank you very much!
Asked by MrG
Solution #1
On the left column, remove the float.
The right column must appear before the left in the HTML code.
It will be flexible if the right column has a float (and a width), but the left column has neither a width nor a float:)
Also, give the outer div an overflow: hidden and some height (auto) so that it encompasses both inner divs.
Finally, add a width to the left column: auto and overflow: hidden, allowing the left column to function independently of the right (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).
Example HTML:
<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>
CSS:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
Example here: http://jsfiddle.net/jackJoe/fxWg7/
Answered by jackJoe
Solution #2
This is exactly what you need: http://www.alistapart.com/articles/negativemargins/ (example 4 there).
<div id="container">
<div id="content">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
</div>
</div>
<div id="sidebar">
<h1>sidebar</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
#container {
width: 100%;
background: #f1f2ea url(background.gif) repeat-y right;
float: left;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: right;
Answered by Adam
Solution #3
Use a negative right-margin instead of positioning the right column before the left.
Also, include a @media setting so that the right column slides beneath the left on small screens.
<div style="background: #f1f2ea;">
<div id="container">
<div id="content">
<strong>Column 1 - content</strong>
</div>
</div>
<div id="sidebar">
<strong>Column 2 - sidebar</strong>
</div>
<div style="clear:both"></div>
<style type="text/css">
#container {
margin-right: -300px;
float:left;
width:100%;
}
#content {
margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
width:300px;
float:left
}
@media (max-width: 480px) {
#container {
margin-right:0px;
margin-bottom:20px;
}
#content {
margin-right:0px;
width:100%;
}
#sidebar {
clear:left;
}
}
</style>
Answered by Loren
Solution #4
The most straightforward and adaptable method so far is to use a table display:
Left div comes first in HTML, followed by right div… we read and write left to right, so placing the divs right to left makes no sense.
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
</div>
CSS:
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
.right {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
Cases examples:
// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}
// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}
Answered by Benj
Solution #5
I’d like to propose a previously unmentioned solution: mix percent and px units using CSS3’s calc() function. Today, calc() has excellent support and allows for the rapid creation of quite complicated layouts.
For the code below, here’s a JSFiddle link.
HTML:
<div class="sidebar">
sidebar fixed width
</div>
<div class="content">
content flexible width
</div>
CSS:
.sidebar {
width: 180px;
float: right;
background: green;
}
.content {
width: calc(100% - 180px);
background: orange;
}
Here’s another JSFiddle that shows how to apply this principle to a more sophisticated layout. Although I chose SCSS because its variables allow for more flexible and self-descriptive code, the layout may simply be recreated in pure CSS if “hard-coded” values aren’t an issue.
Answered by Illya Moskvin
Post is based on https://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid