CODEWITHSUNDEEP
htmlcss
swayziak
swayziak

Reputation: 747

How to make a fluid sidebar?

I'm creating a sidebar with this CSS code: 

.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}

But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?

Thanks.

Upvotes: 4

Views: 674

Answers (2)

Erfan Jazeb Nikoo
Erfan Jazeb Nikoo

Reputation: 988

Look at the height in body in CSS part.

Here is a working example for you:

Your HTML:

<div id="content"> 
<p>This design uses a defined body height of 100% which allows setting the contained left and 
right divs at 100% height.</p> 
</div> 

<div id="sidebar"> 
<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p> 
</div>

Your CSS:

body { 
margin:0; 
padding:0; 
width:100%; /* this is the key! */ 
} 

#sidebar { 
position:absolute; 
right:0; 
top:0; 
padding:0; 
width:30%; 
height:100%; /* works only if parent container is assigned a height value */ 
color:#333; 
background:#eaeaea; 
border:1px solid #333; 
} 

#content { margin-right: 200px; }

Upvotes: 4

apaul
apaul

Reputation: 16180

Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.

I included the workaround along with a simple 2 column fluid layout.

Try this- jsFiddle

    html, body {
        margin:0;
        padding:0;
        background:silver; 
/* workaround to get the columns to look even, 
change color depending on which column is longer */ 
    }

    #sidebar {
        position:absolute;
        left:0px;
        top:0px;
        padding:0;
        width:30%;
        background:silver;
        word-wrap:break-word;
    }

    #content {
        position:absolute;
        right:0px;
        width:70%;
        word-wrap:break-word;
        background:gray;
    }

Upvotes: 0

Related Questions