CODEWITHSUNDEEP
htmlcss
DMande
DMande

Reputation: 341

fixed header width 100%

i have the following code but for some reason does not work.

<body>
    <div class="body_wrapper">
        <header></header>
    </div>    
</body>

i would like body_wrapper to have margin:20px but when put position:fixed to header ignores it from the right side.

http://jsfiddle.net/vfe1bz65/

i want header take width 100% of the body_wrapper. i tried putting right:20px, right:20px but nothing

is this possible without putting for example width:98%?

Upvotes: 1

Views: 5683

Answers (3)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

remove the width and set both left and right properties
e.g. http://jsfiddle.net/rbk7jv8b/

header {
    min-height:160px;
    background:red;
    position:fixed;
    left: 20px;
    right: 20px;
    z-index:100;
}

Another approach is using calc() for the width property (100% minus 40px of margin) e.g. http://jsfiddle.net/f1ay8zkr/

header {
    min-height:160px;
    background:red;
    position:fixed;
    width: calc(100% - 40px);
    z-index:100;
}

Upvotes: 4

Fares M.
Fares M.

Reputation: 1538

add right:20px; and left:20px; the remove width:100%

header {
  min-height: 160px;
  background: red;
  position: fixed;
  z-index: 100;
  right: 20px;
  left: 20px;
}

Upvotes: 0

Thomas Rbt
Thomas Rbt

Reputation: 1538

Your div isn't close. 

<body>
    <div class="body_wrapper">
        <header></header>
    </div>    
</body>

Then, use left and right properties :

header {
    min-height:160px;
    background:red;
    position:fixed;
    left: 20px;
    right: 20px;
}

Upvotes: 0

Related Questions