I am using the Zurb Foundation framework to build the front-end (http://foundation.zurb.com/docs/grid.php) and I have created my basic layout fine, no problems.
What I am wondering about is how to pad the content inside the columns? All the content is aligned to the left side as you'd expect, but I can't see a way to create a padding without either customising the grid layout markup, or creating lots of wrappers everywhere.
For example, the markup
<div class="container">
<div class="row">
<div class="eight columns customise-the-grid">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
<div class="four columns">
<div class="or-create-a-wrapper">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
</div>
</div>
Some css to illustrate
.customise-the-grid{
padding: 10px;
}
.or-create-a-wrapper{
padding: 10px;
}
Yes this has always been the problem with Grid systems and non-fluid designs. Not to mock them though, they definetly have their advantages against fluid designs, but they are awkward to work with.
What i'd do is to set a margin on the element inside the element you wish padding on. If that makes sense.
<div class="four columns">
<div class="or-create-a-wrapper"><!-- margin here -->
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
OR
<div class="four columns">
<div class="or-create-a-wrapper">
<div class="another-div-yay"><!-- margin here -->
<p>My main content</p>
<ul><li>My item</li></ul>
</div>
<!-- other various content -->
</div>
</div>
why not add padding or margin to the child elements? something like
.columns * {margin:0px 10px}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With