CODEWITHSUNDEEP
htmlcsswidth
user6236754
user6236754

Reputation:

HTML width 100% goes outside the page

I'm pretty newbie with HTML and CSS. So, I've got a problem with the width of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the width per cents a little or is there some flaws in my code that could cause this?

I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: http://jsfiddle.net/gj53jbz9/

 body{
              font-size: 15px;
              margin: 0px;
              background-color: lightgrey;  }

            #header{
              padding: 30px;
              width: 100%;
              height: 250px;
              background-color: grey;   }

            #name{
              padding: 5px;
              font-size: 25px;
              float: left;  }


            #navbar{
              float: right;
              text-align: right;    }

            #navbar a{
              background-color: black;
              display: inline-block;
              width: 120px;
              text-align: center;
              padding: 10px 0px;
              text-decoration: none;
              color: lightgrey; }

            #title{
              clear: both;
              text-align: center;
              padding-top: 100px;
              font-size: 45px;  }

            #content{
              text-align: center;
              width: 80%;
              margin: 0px auto;  }
   <div id=header>
            <div id=name>Name</div>
            <div id=navbar>
                <a href="page1.html">Link1</a>
                <a href="page2.html">Link2</a>
            </div>
            <div id=title>Insert title here</div>
        </div>
        <div id=content>
            <h3>Age of aggression</h3>
            <p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
            <p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
  </div>

Upvotes: 8

Views: 11221

Answers (9)

Lajos Arpad
Lajos Arpad

Reputation: 77012

Take a look at this part of your code:

        #header{
          padding: 30px;
          width: 100%;
          height: 250px;
          background-color: grey;   }

This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS:

        #header{
          padding: 30px;
          width: calc(100% - 60px);
          height: 250px;
          background-color: grey;   }

Upvotes: 2

Normajean
Normajean

Reputation: 1275

left: 0px;
right: 0px;
width: auto;
position: relative;

Upvotes: 0

Salvador Ruiz Guevara
Salvador Ruiz Guevara

Reputation: 184

Header.Width=100% and Header.Padding=30px are causing the problem.

You are telling the browser that the header will use the 100% of the width, PLUS a pad of 30px. So the width is 100%+30px of the space created by the padding.

Try moving the width to the body property so all the page will use the 100% of the available space. That should fix it.

Upvotes: 0

Guilherme Borges
Guilherme Borges

Reputation: 54

It is because padding is being summed to width 100%.

Try to use box-sizing, like that:

#header{
    padding: 30px;
    width: 100%;
    height: 250px;
    background-color: grey; 
    box-sizing: border-box;
}

Upvotes: 0

Anum R
Anum R

Reputation: 1

Don't give padding from left and right to your header div.

Add some margin to name and navbar div

just like this

#header {
    padding: 30px 0px;
    width: 100%;
    height: 250px;
    background-color: grey;
}

#name {
    padding: 5px;
    font-size: 25px;
    float: left;
    margin-left: 40px;
}

#navbar {
    float: right;
    text-align: right;
    margin-right: 40px;
}

Upvotes: 0

Racil Hilan
Racil Hilan

Reputation: 25361

By default, HTML elements calculate their sizes based on the content only, so excluding the padding, borders and margins. To change that behavior, use:

box-sizing: border-box;

This makes the calculation include the padding and borders. You can add it to any element you want, but it is a common practice to add it to all elements:

* {
    box-sizing: border-box;
}

Upvotes: 1

Gilbert Cut
Gilbert Cut

Reputation: 113

Every HTML element has some default values. Please check here: https://www.w3schools.com/cssref/css_default_values.asp

You can also try to set all elements margin and padding as 0. Just like that:

*{margin: 0; padding: 0}

Upvotes: 0

vicbyte
vicbyte

Reputation: 3790

Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width).

#header{
  padding: 30px;
  width: 100%;
}

Either remove padding and add it to an inner element with no width set, or use:

box-sizing: border-box;

Which makes the width calculation include padding. :)

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Upvotes: 14

br.julien
br.julien

Reputation: 3460

It seems to work if you remove margin: 0px; from the properties inside body {} I don't know why it has this behaviour

Upvotes: 1

Related Questions