Element inside body doesn't fit in body

Question

HTML :

<body>
<header>
    <div>
    </div>
</header>
</body>

CSS :

body { width : 1000px ; }
header { width : 100% ; }

If there are codes like this,
I think that the header's width will be same with body's width.

but It didn't work as my think.
Here is the code : http://jsfiddle.net/o3omng/q4xewdew/

In that code, .header's width is bigger than body.
but Don't fix the css code like ".header { width : 1000px ; }"
because I'm making responsive web. Please use %.

possible duplicate of [CSS Input with width: 100% goes outside parent's bound](http://stackoverflow.com/questions/16907518/css-input-with-width-100-goes-outside-parents-bound) — Jonathan Lonowski, Aug 31 '14 at 06:10
in your example fiddle the width of header is 501 and of the body 1100 (your css over here is incorrect) so the width of header is already less than the body. — V31, Aug 31 '14 at 06:13

score 0 · Answer 1 · answered Aug 31 '14 at 06:18

0

Try setting the headers position as relative

position: relative;

you can also change your image style

margin-top: 50px;

to

padding-top: 50px;

if you don't like how the margin-top moves moves the whole body down 50px

answered Aug 31 '14 at 06:18

Zack

874
1
9
18

score 0 · Answer 2 · answered Aug 31 '14 at 06:36

you said the answer by yourself, you have to use percentages instead of fixef sizes, change your css to this and it will work:

* { margin : 0px ;
    padding : 0px ; }

body { background : #f8f8f8 ;
       height : 2000px ;
       width : 100%;
       margin : 0 auto ;}

.header { position : fixed ;
          border-bottom : 1px solid #f1f1f1 ;
          width : 100% ; background:#fc0; width:100%;}
.header img { display : block ;
              margin-left : auto ;
              margin-right : auto ;
              margin-top : 50px ;
              margin-bottom : 50px ; }

score 0 · Accepted Answer · answered Aug 31 '14 at 08:47

Positioning the header with a fixed value, it will make it to ignore its parent position and dimensions. It will always be displayed in the screen, in that fixed position that you will specify (top/left/bottom/right) and the dimensions you will give it.

So you can't have your header follow the body with a given 100% width only and a fixed position. Actually it all depends on what do you want to do. Do you want the header in fixed position, always visible in the screen? Do you also want the header to be full-width ? You said about responsive and about 100%, but you have also your body's width at 1100px.

So with that in mind, you could try something like below, which will keep your requirement for a max width of the page at 1100px and will also position the header in center at fixed position and responsive.

body {
    background : #f8f8f8 ;
    height : 2000px ;
    width: 100%;
    max-width:1100px;
    margin:0 auto;
    box-sizing:border-box;
    position:relative;
}

.header {
    position : fixed ;
    border-bottom : 1px solid #f1f1f1 ;
    width : 100% ;
    max-width:1100px;
    background:#ddd;
}
.header img {
    display : block ;
    margin-left : auto ;
    margin-right : auto ;
    margin-top : 50px ;
    margin-bottom : 50px ;
}

Element inside body doesn't fit in body

3 Answers3