[Solved] aligning divs with floats

[tracybags]

Hi All,
I am just building the framework for a responsive site so what you see is just fake text and coloured backgrounds on divs so I can see what’s happening. I have two columns working side by side, then 4 columns working side by side, which when I’ve done the media queries will become 2×2, etc. I have finally managed to get everything to line and move as I want it to using % widths. But if I want to add any padding to the div (so content is not hard to either side), it shifts my cell alignment. I would understand this if my maths was wrong in calculating the div width and then the padding and not reducing the width by the amount of the padding so the total is 960px. But in this case I’m using % – 70% and 30% – but as soon as I add either padding or margin, it shifts by the amount that I’ve added. Why would this be if I’m using percentage??
Thank you very much for your help. :)
Codepen is http://codepen.io/anon/pen/QbzZdb
live online is here http://www.darlingmagazine.co.uk/INDEX2.html

[Paulie_D]

You just need to use

* {
box-sizing:border-box;
}

so that padding & borders are included in any dimensions you might use. Otherwise they are in addition to any widths/heights stated

http://codepen.io/Paulie-D/pen/BNvqRX

[tracybags]

Thank you so much!! Worked a treat! I am a moron because I have this on another site I did but didn’t carry it across as I forgot what it did!! I was trying to work from scratch on this one. Thanks so much again, speedily answered and now I can crack on. You’ve got to love this site!! :)

[[email protected]]

Inheriting border-box from the root is considered a better practice. CSS Tricks had a great article on this I believe.

 html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
 }

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
       -moz-box-sizing: inherit;
            box-sizing: inherit; 
}    

[tracybags]

Thanks very much. I used to have this in another site I did:
* {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit /
-moz-box-sizing: border-box;
/ Firefox, other Gecko /
box-sizing: border-box;
/ Opera/IE 8+ */
}

[Author]

Posts