Menu
Simply put, I am working on a responsive web layout with columns and rows. Each column width is set relevant to a predefined total width:
column width / total width = width %
and the height is fixed.
Now the problem is, I want the content width to be fluid but the margin and padding to be of fixed width as below.
The code looks something like this:
HTML
<body>
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</body>
CSS
div {
float: left;
padding: 0.5em;
box-sizing: border-box;
width: 33.3333333333333%; height 5em; line-height: 5em; text-align: center;
}
#left {
background-color: red;
}
#middle {
background-color: green;
}
#right {
background-color: blue;
}
http://jsfiddle.net/langoon/Zxn8E/2/
I have thought of some solutions but none of them seem to do what I am looking for :
Am I trying to have my cake and eat it at the same time or is there a way to do this without the drawbacks?
888
With :before / :after
I had fun with :before and :after pseudos, covering half of each gutter with a rectangle: http://jsfiddle.net/PhilippeVay/Zxn8E/11/ (note where the ending tags are, to prevent any whitespace between inline-block elements)
Compatibility: IE8+ as IE7 and lesser don't understand these pseudos.
With Flexible Box Layout Module
This CSS3 module will let you have equal width columns with gutter inside and none outside, exactly what you want to achieve. No fiddle as the syntax changed twice in a few months, I still haven't looked at the new one.
Compatibility on caniuse.com (no IE9-, no Opera)
121
I think the best way to solve this is using a negative margin and the box-sizing property. A quick example:
<ul>
<li><div class="red">Red</div></li>
<li><div class="green">Green</div></li>
<li><div class="blue">Blue</div></li>
</ul>
ul
{
list-style: none;
margin: 0 0 0 -15px; /* Note the negative margin */
padding: 0;
overflow: hidden;
}
li
{
float: left;
width: 33.3333%;
padding: 0 0 25px 15px;
box-sizing: border-box;
}
/* Some decorations */
div { padding: 25px 0; color: white; text-align: center; }
div.red { background: red; }
div.green { background: green; }
div.blue { background: blue; }
If you want to see this in action, I've created a Fiddle.
41
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
