After conducting various experiments, I have devised a method to incorporate fixed and equal gutters between floats. My approach involves using positive and negative margins as well as multiple wrappers, making the solution somewhat cumbersome. However, I believed it was final until I discovered that it only works for floats of equal height.
Check out my demo here: http://jsfiddle.net/aaand/qnS2b/
I am aiming for this layout:
+-------------------------------+
|+---+ GUTTER +---+ GUTTER +---+|
|| | | | | ||
|+---+ +---+ +---+|
+-------------------------------+
The structure is as follows:
<div class="container-with-negative-margins">
<div class="floated-container-with-set-width">
<div class="container-with-positive-margins">
<p>sample text</p>
</div>
</div>
</div>
In addition, here is some example CSS code:
.container-with-negative-margins {
margin: -10px;
}
.floated-container-with-set-width {
float: left;
width: 33.33%;
}
.container-with-positive-margins {
margin: 10px;
/* The included jsfiddle specifies a fixed height and overflow: hidden, but I prefer not to use those */
}
If I introduce content that causes the <div>s to have different heights, the solution no longer functions effectively.
Do you have any suggestions or solutions?