CODEWITHSUNDEEP
htmlcss
Wilfred Hughes
Wilfred Hughes

Reputation: 31161

Position: relative and floating elements

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?

Upvotes: 0

Views: 77

Answers (4)

Adrian Florescu
Adrian Florescu

Reputation: 4492

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

Upvotes: 1

asubanovsky
asubanovsky

Reputation: 1748

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/

Upvotes: 0

mikea80
mikea80

Reputation: 127

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

Upvotes: 0

TheWebMann
TheWebMann

Reputation: 115

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

Upvotes: 1

Related Questions