Help with a layout

[Austin_Davis]

Keep in mind this is my first attempt at a layout, so there is probably some erroneous errors in my logic on how certain concept works. But I was trying to firgue out why my div “left-advert” is not aligned with the divs “Content” and “Right-advert”. Here is what I have so far on codepen http://codepen.io/Austin-Davis/full/EcvrI.

[Paulie_D]

It’s because you have padding in there which gets added to the overall width so your percentages no longer work right.

You can add

* {
box-sizing:border-box;
}

http://codepen.io/joe/pen/mdrEw

and it will fix it but that doesn’t work for some legacy browsers. Alternatively, resist the temptation to add padding to block level elements such as divs but rather add it to the content of those divs.

[Austin_Davis]

So target the paragraph inside the div instead instead of the div itself?

[theCSSguru]

> So target the paragraph inside the div instead instead of the div itself?

Yes, but no….you can add another div for the padding you require inside of the div that has the hard width you want – you don’t want to put the padding on your content itself such as a paragraph or h1 tag.

Though box-sizing is pretty amazing, and legacy browsers are being kicked to the kirb pretty rapidly, i’d say use box-sizing. It makes the world a better place for fast coding. lol.

[Paulie_D]

I have to disagree with the above. Unless you can afford to ignore legacy browsers then add the padding to pay tags or heading tags. I certainly wouldn’t add an extra div just for styling.

[David_Leitch]

According to [this](http://caniuse.com/css3-boxsizing “http://caniuse.com/css3-boxsizing”), it’s just IE7 and IE8 that don’t support it. With them having around 10% market share, they’re still work considering in my opinion, but with that said, it also depends on what your users are using.

Boy, it’ll be good when IE6/IE7 finally kick the bucket.

EDIT: According to [this](http://caniuse.com/css3-boxsizing “http://caniuse.com/css3-boxsizing”) it’s just IE6 and E7 that doesn’t support it (You can tell when I haven’t had my morning coffee yet hehe)

[Andy Howells]

Regarding box-sizing, support [goes back as far as IE8](http://caniuse.com/#search=box-sizing) .

Realistically speaking, unless a client specifically asks for it or wants to pay more, IE7 really isn’t worth supporting any more taking into account its tiny usage percentage.

[theCSSguru]

In August this year Google dropped support for IE7 all together, in lieu of supporting all their new web apps for modern browsers.

I tried to push the company I work for to drop IE7 as well, but we do so many grandma/grandpa sites (those that still run XP IE7) that we couldn’t forgo it completely.

If I end up using box sizing, i’ll simply use a .ie7 rule (conditional comment class on the html tag) to fix those little discrepancies in the layout.

[Author]

Posts