Question

I am using the following CSS to get my widths on my header and section.

header {
width: 100%;
height: 60px;
    padding:60px;
    float:left;
    background: url('extras/header.jpg') repeat-x;
}

section {
width: 100%;
float: left;
    padding:20px 60px;
height:760px;
    background: url('extras/body.jpg') repeat-x;
}

On IE, Chrome and FF, the design is being stretched horizontally and producing an X axis scrollbar. Even of resolutions upwards of 1300px.

Can anyone see why?
Do I need to specify more code?

Thanks

Answer 1

Padding is always added with your defined width. So actually your container will get 100%+120px width from the css file. So reduce your width to less than 100%.