CODEWITHSUNDEEP
htmlcss
kayhart
kayhart

Reputation: 85

Why is l-box breaking Purecss.io grids?

Can't seem to figure out why once I add the l-box class to my div elements it breaks the grid in Purecss.io

I'm following the template here http://purecss.io/layouts/marketing/ but as you can see in my codepen http://codepen.io/anon/pen/axAGJ the addition of l-box royally screws up the 4 column pattern but seems to work just find in the template.

I inspected the elements on both mine and the template and the issues I see is that the width of the div itself is bigger on my rendition but I don't know what's causing that to happen or how to change it.

I've tried adjusting my font sizes and the elements still stack incorrectly.

Template div width 277.500px My div width 330.250px

.l-box {
padding: 1em;
}

Upvotes: 0

Views: 495

Answers (1)

Andrew
Andrew

Reputation: 3663

The biggest problem you were encountering was the padding effecting your boxes to be to large. To overcome this, there is a css attribute called box-sizing:.

The box-sizing property allows you to define certain elements to fit an area in a certain way. So, by setting this property to border-box you will have content, padding and border fit inside your div instead of push out making it larger than you'd expect.

Be careful though, as this property is somewhat new and may need fall back for people using older browsers.

Usage example:

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

This will make sure the padding on l-box occurs inside the div.

Upvotes: 2

Related Questions