CODEWITHSUNDEEP
htmlcss
Munch
Munch

Reputation: 779

HTML & CSS Resizing

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

Here is the code for the completed product:

https://jsfiddle.net/dppttuvn/

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)

Upvotes: 0

Views: 63

Answers (4)

Shadi Alnamrouti
Shadi Alnamrouti

Reputation: 13248

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

Upvotes: 0

Dave Lunny
Dave Lunny

Reputation: 770

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.

Upvotes: 1

fl0cke
fl0cke

Reputation: 2884

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/

Upvotes: 1

user5869755
user5869755

Reputation: 11

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;
     }

Upvotes: 1

Related Questions