HTML & CSS Resizing

Question

So I followed this tutorial on centering content, it's a two column layout. Tutorial

Here is the code for the completed product:

My problem is, as soon as I change the #wrap width and then #main and #sidebar width so it fills the #wrap width, the layout completly screws up. As shown in this link:

https://jsfiddle.net/dwzvoarv/

The sidebar isn't to the right of the main section.

Can someone briefly explain why this happens and also fix it?

Thank you! (I'm still learning web development clearly lol)

Dave Lunny · Accepted Answer · 2016-02-01 21:28:24Z

1

It's because of the box-sizing. By default, browsers separate padding and width, so basically the total width of your element is padding + width.

Lets say your element is 1000px, with a padding-left: 100px. What the browser will do by default is paint the element as being 1100px because that extra padding isn't included in the width (by default).

Add this selector to the top of your stylesheet...

* {
  box-sizing: border-box;
}

...and what this is doing is telling every element on the page (thats what the * selector with no parent selectors does) and sets the box-sizing property of it to border-box, meaning that the browser will now respect the width property as the actual total width.

So now if you have a 1000px element with padding-left: 100px, then the total width will still actually be 1000px including that padding.

edited Feb 1, 2016 at 21:28

answered Feb 1, 2016 at 21:23

Dave Lunny

7709 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user5869755 · Accepted Answer · 2016-02-01 21:18:47Z

You have to account for padding when you set widths. So to get 1000px you set #main to 700px and #sidebar to 300px. However since there is a 10px padding all around you have to subtract those pixels 10px left and 10px right. so your #main should be 680px and #sidebar should be 280px. Run this code in JS Fiddle and you can see it working.

         body,
     html {
        margin: 0;
        padding: 0;
        color: #000;
        background: white;
     }

     #wrap {
        width: 1000px;
        margin: 0 auto;
        background: #99c;
     }

     #header {
         padding:5px 10px;
         background:#ddd;
     }

     h1 {
         margin:0;
     }

     #nav {
         padding:5px 10px;
         background:#c99;
     }

     #main {
         float:left;
         width:680px;
         padding:10px;
         background:#9c9;
     }

     h2 {
         margin:0 0 1em;
     }

     #sidebar {
         float:right;
         width:280px;
         padding:10px;
         background:#99c;
     }

     #footer {
         clear:both;
         padding:5px 10px;
         background:#cc9;
     }

     #footer p {
         margin:0;
     }

     /* Navigation Bar */

     #nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
     }

     #nav li {
        display: inline;
        margin: 0;
        padding: 0;
     }

fl0cke · Accepted Answer · 2016-02-01 21:19:39Z

1

That's because the actual size of the divs is width + padding + border. Use:

div{
  box-sizing:border-box;
}

To get the desired behaviour. Read more at https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

Updated fiddle: https://jsfiddle.net/dwzvoarv/4/

answered Feb 1, 2016 at 21:19

fl0cke

2,9041 gold badge18 silver badges25 bronze badges

Comments

Shadi Alnamrouti · Accepted Answer · 2016-02-01 21:45:21Z

0

Specifically for your example, you can fix it by changing the wrap width to 1040px:

   #wrap {
        width: 1040px;   /*instead of 1000px*/
    }

width of wrap = width of main + width of column + padding of main (right and left) + padding of column (right and left) = 700 + 300 + 20 + 20 = 1040px

answered Feb 1, 2016 at 21:45

Shadi Alnamrouti

13.6k5 gold badges62 silver badges56 bronze badges

Collectives™ on Stack Overflow

HTML & CSS Resizing

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related