CSS layout width fixed width and fluid right column

Question

I have a fixed with container, lets say 1120px. Inside this container, i have a left sidebar which is 400px, and i need a right sidebar which is expanding from the container and touching the right side of the screen. Here is an image explaining the layout i want:

Explaining the issue

This is the progress i made so far: http://jsfiddle.net/UvxK8/

#wrapper {
    background:#f0f0f0;
    margin:0 auto;
    width:400px;
    overflow:hidden;
}

#wrapper .left {
    width:100px;
    float:left;
    height:600px;
    background:#333;
}

#wrapper .right {
    position:absolute;
    margin-left:100px;
    height: 650px;
    background: green;
    min-width:100%;
}

Obviously its not good, because the right sidebar is too wide and a horizontal scrollbar appears.

Sinister Beard · Answer 1 · 2014-03-17T10:08:39.947

0

The image you've used doesn't match your desicription of what you want; I think maybe you're looking at this the wrong way. If the right sidebar spills beyond the container, what's the point of the fixed width container at all?

From your image, it looks like what you want is...

HTML

<div id="header"><h1>Content here.</h1></div>
<div id="container">
    <div id="container-left">
        <p>Content here.</p>
    </div>
    <div id="container-right">
        <p>Content here.</p>
    </div>
</div>

CSS

#header {width:1120px;}
#container {width:100%; min-width:100%;}
#container-left {width:400px; float:left; }
#container-right {width:100%; min-width:100%;}

This will create the image illustration you've used. jFiddle here: http://jsfiddle.net/4JNX2/

edited Mar 17 '14 at 10:08

answered Mar 17 '14 at 09:52

Sinister Beard

3,570
12
59
95

according to this container-right will create below container-left @BFDatabaseAdmin – Atal Shrivastava Mar 17 '14 at 10:00
Notice that the image is wider that the container, that means the whole image is the body, and the container is centred inside the body. Does that make more sense? – passatgt Mar 17 '14 at 10:04
@AtalShrivastava - Sorry, couple of errors in my CSS. Corrected now, with jsFiddle. – Sinister Beard Mar 17 '14 at 10:09
Thanks, but the container should be centered inside the body. Also, your updated example still generates a horizontal scrollbar. – passatgt Mar 17 '14 at 10:10
@passatgt - Yes, it will generate a horizontal scroll becuase the jsFiddle window is less than 1120px wide... – Sinister Beard Mar 17 '14 at 10:30
Still not what i want. The container needs to be fixed, with margin:0 auto; – passatgt Mar 17 '14 at 10:54
you can add overflow-x:hidden, even if it is a fluid container. Why not you are using flexbox @passatgt – Atal Shrivastava Mar 17 '14 at 11:08
with overflow hidden, if i have text in the right column, the right side will be cut off. – passatgt Mar 17 '14 at 11:20

Atal Shrivastava · Answer 2 · 2014-03-17T11:20:27.537

0

Add position relative to your wrapper. try this

HTML

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

CSS

#wrapper
{width:1120px;
background:#096;
margin:0 auto;
position:relative;
}

#wrapper #left {
width:10%;
float:left;
height:600px;
background:#333;
}

#wrapper #right {
position:absolute;
margin-left:10%;
height: 650px;
background: green;
min-width:95%;
}

edited Mar 17 '14 at 11:20

answered Mar 17 '14 at 09:53

Atal Shrivastava

674
1
9
35

A horizintal scrollbar still appears based on the browser width, so this is not a good solution. – passatgt Mar 17 '14 at 10:02
i have edited my answer check [fiddle](http://jsfiddle.net/Z2R7S/). this is for fixed 1120px container. if you are looking for responsive on this then you need to add media queries – Atal Shrivastava Mar 17 '14 at 11:21

CSS layout width fixed width and fluid right column

2 Answers2