Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I've stayed clear of using any kind of grid systems because I always mess it up with padding and margin.

Let's sat my grids are at 90px and I have this code:

//HTML
<div class="col1">
 <div class="content">
   Hello world
 </div>
</div>

//CSS
.col1 { width: 90px; margin: 0px; padding: 0px; background-color: #444; }
.content { margin: 20px; color: #fff; background-color: #0087d5; width: 100%; }

JSfiddle here.

How can I work with grids, make sure the grid remains 90px width, while having inside ´div´ at 100% width with 20px padding / margin?

I know there are many grid systems out there and I've tested a few, but I must be "attacking" this the wrong way because my grids always expands when I start using padding to get some space.

share|improve this question
1  
There are spaces between the grids themselves, so you don't need to worry about margins and padding. – Kyle Sevenoaks yesterday

1 Answer

up vote 1 down vote accepted

You should be applying box-sizing, which accounts for padding when computing the width (i.e. 90px + 10px for padding, will apply the padding inwards, rather than creating a total width of 110px. If you want to be extra safe, add this to your reset or normalise stylesheet:

* { box-sizing: border-box }

For older versions of Safari & Firefox:

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

Using the wildcard selector allows the box-sizing property to be applied to all elements. I know this is included in some grid systems out there, e.g. Skeleton.

share|improve this answer
Ah, I'd forgotten about that. I'll give it a go :) – Steven 13 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.