CODEWITHSUNDEEP
css
sark9012
sark9012

Reputation: 5737

Width 100% overflowing horizontally

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

Upvotes: 1

Views: 145

Answers (3)

jakee
jakee

Reputation: 18556

If you don't want to concern yourself with the math of calculating the width-padding-margin-doodahs-demwutwuts you can declare your headers and sectionsto have the box-sizing: border-box, so your final rendered boxes will be of the declared width and the paddings will be cut inside the boxes. More info

Upvotes: 0

binhgreat
binhgreat

Reputation: 1002

You can use two div, and set padding in outer div (please remove padding from header and section also). Like that:

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

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

<!-- And in your code: -->
<div style="padding: 60px;">
   <div class="header">
      <p>Content here</p>
   </div>
</div>

Upvotes: 1

Sudip
Sudip

Reputation: 2051

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%.

Upvotes: 2

Related Questions