Position: relative and floating elements - html

Question

I'm trying to set a simple page grid. Each row consists of an optional left column, plus a main content right column. I want the right column to remain the same size at the same position even if the left column isn't present.
I figured that floating the left column and using position: relative with left: on the right column would give me the behaviour I want.
My HTML looks like this:
<div class="row">
<div class="sidebar">I'm a sidebar!</div>
<div class="main">
<p>I'm main!</p>
</div>
</div>
and my CSS looks like this:
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Here's a fiddle: http://jsfiddle.net/ttr5k/1/
To my surprise, the content of .main is shifted right (as if .main had padding-left) seemingly due to the sidebar. Why is this, and how could I solve it?
I also suspect this isn't the best way to build a grid, is there a better approach?

Answer 1

Add position absolute instead of relative
http://jsfiddle.net/ttr5k/2/
As you can see the text aligns left again
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: absolute;
left: 220px;
width: 500px;
border: 1px solid green;
}

Answer 2

I recommend doing something like this:
.row {
background:#eee;
width:90%;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:left
width: 500px;
border: 1px solid green;
overflow:auto;
clear:right;
}
Now you will be able to remove the sidebar whenever you want without adding new CSS
DEMO: http://jsfiddle.net/ttr5k/5/
OR------
if you want that space even if no sidebar and still want to content to overflow:
http://jsfiddle.net/ttr5k/7/
.row {
background:#eee;
width:600px;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:right;
width: 396px; /* This is due to box-model adding border as width */
border: 1px solid green;
overflow:auto;
clear:right;
}

Answer 3

Here is the FIDDLE on how I would do it: http://jsfiddle.net/mikea80/zJa5P/
<div class="row">
<div class="main">
<p>I'm main!</p>
</div>
<div class="sidebar"><p>I'm a sidebar!</p></div>
</div>
.row {
margin: 0 auto;
width:704px;
clear:both;
}
.main {
display:inline-block;
float:right;
width: 500px;
border: 1px solid green;
}
.sidebar {
display:inline-block;
float: right;
width: 200px;
border: 1px solid red;
}
With the row being 700px this code will center it

Answer 4

You have to add position absolute to sidebar class.
CSS:
.sidebar {
position: absolute;
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Trust me, this way, you can add other row class without any problem. Here is the FIDDLE:
http://jsfiddle.net/asubanovsky/bVr6r/