CODEWITHSUNDEEP
css
Deepak Ingole
Deepak Ingole

Reputation: 15742

fixed sidebar css does not work

I am working making sidebar fixed on left side, But sidebar getting not properly placed.

Here is my code,

HTML

<div class="wrapper">
    <div class="sidebar">Sidebar</div>
    <div class="contents">
        <div class="header">Header</div>
        <div class="main-content">contents</div>        
    </div>
</div>

CSS

/* apply a natural box layout model to all elements */

*, *:before, *:after {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

body {

    margin:0;

    padding:0;

}

.wrapper {

    width: 100%;

    height:100%;

    overflow-x: hidden;

    clear:both;

}

.sidebar {

    float:left;

    border: 1px solid red;

    position: fixed;

    width: 20%;

    height: 100%;

    color: red;

}

.contents {

    border: 5px solid yellow;

    float:left;

    width: 80%;

    height: 100%;

    color: green;

}

I appreciate ans with detailed cause. Not only code.

Fiddle

Upvotes: 1

Views: 54

Answers (3)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

It's more easy than you think, you code 

<div class="wrapper">
<div class="sidebar">Sidebar</div>
<div class="contents">
    <div class="header">Header</div>
    <div class="main-content">contents</div>
</div>
</div>

The contents div is not inside because you are not inserting it into sidebar

try this 

<div class="wrapper">
<div class="sidebar">Sidebar
<div class="contents">
    <div class="header">Header</div>
    <div class="main-content">contents</div>
   </div>
  </div>
</div>

Note <div class="sidebar">Sidebar http://jsfiddle.net/2e95b/ But if you wanted not to include yellow bordered div, try this http://jsfiddle.net/6skQg/ note: contents has float:right;

Upvotes: 0

codingrose
codingrose

Reputation: 15699

It is not happening because your sidebar starts from left 0, and your contents also.

Move contents from left as the width of sidebar.

Write:

.contents {
    margin-left:20%;
}

Updated fiddle here.

Upvotes: 2

amol
amol

Reputation: 1555

Add a wrapper to sidebar and make some changes in css

Check this DEMO

<div class="wrapper">
    <div class="sidebarWrap">
        <div class="sidebar">Sidebar</div>
    </div>
    <div class="contents">
        <div class="header">Header</div>
        <div class="main-content">contents</div>
    </div>
</div>


*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    margin:0;
    padding:0;
    height: 100%;
}

.wrapper {
    width: 100%;
    height:100%;
    overflow-x: hidden;
    clear:both;
}

.sidebarWrap {
    float:left;
    border: 1px solid red;
    width: 20%;
    height: 100%;
    color: red;
}
.sidebar{
    position: fixed;
    height: 100%;
}

.contents {
    border: 5px solid yellow;
    float:left;
    width: 80%;
    height: 100%;
    color: green;

}

Upvotes: 0

Related Questions