Update and Summary
I feel obligated to make this question clearer now that there is generosity.
(Also, I’m sure it will be a child’s game when the CSS3 calc() unit value is supported, something like width: calc(25% - 5px) , although we will probably look at our minds on the Internet for this moment)
I am working on a CSS framework for several projects that share design requirements; namely, the liquid layout of 12 columns. Using floating .column elements with a percentage width of (100% / 12) x col_size is quite simple. However, the problem is with the addition of fixed fields (or any form of spacing) between the columns.
My initial attempt was to use the current columns as described, with a .panel child nested in each. The following is a snippet of HTML / CSS (short for brevity):
.column{ float: left; display: inline-block; } .width-01{ width: 8.3333%; } .width-02{ width: 16.6666%; } .width-03{ width: 25%; } .panel{ width: 100%; padding: 5px; box-sizing: border-box; }
<div class="column width-02"> <div class="panel">Width-02</div> </div> <div class="column width-03"> <div class="panel">Width-03</div> </div> <div class="column width-02"> <div class="panel">Width-02</div> </div> <div class="column width-05"> <div class="panel">Width-05</div> </div>
This snippet will create a layout similar to the image below, however all .panel elements are indented 5px on all sides. I'm trying to make the edge of the contents of the outer columns flush with the edge of the view port (or the parent container, for that matter) . Another approach would be to exclude the .panel class and just go with the columns:
.column{ float: left; display: inline-block; padding-left: 10px; box-sizing: border-box; } .column:first-child{ padding-left: 0px; } .width-01{ width: 8.3333%; } .width-02{ width: 16.6666%; } .width-03{ width: 25%; }
<div class="column width-02">Width-02</div> <div class="column width-03">Width-03</div> <div class="column width-02">Width-02</div> <div class="column width-05">Width-05</div>
Again, this works well, bringing the results even closer to the image results below, but now the (actual) problem is that the gasket eats across the width of the columns screwing up the width distribution. The :first-child column has 10 pixels (or regardless of the size of the field) a larger width of the content area than its siblings.
It may seem harmless, even imperceptible; however, there are several examples where the exact (as possible) distribution of the width between the elements is either necessary or will facilitate the situation.
So whether padding, margin or any combination of them is used; Is there any solution for fluid columns, fixed fields, with a uniform distribution of the gutter space, which will not enclose the marginal content area (*** haha * ) from neighboring columns? **
Original question
Due to the simple lack of results in my searches and attempts, I came to the conclusion that this is impossible. If in any case an answer can be given, I am sure that he is here.
Is there a way using pure CSS to achieve column width with column width with fixed width fields?
Important Note . This figure is just an example, not the specific layout that I want to achieve. This solution should allow for any combination of adjacent columns with a total width distribution of 12 or less. View the popular 960 grid for reference.)
Note In a 12-column layout, the distribution of the column widths in the image is 2, 3, 2, and 5, respectively.
So far, I have resorted to a grid that, using interest, has almost achieved this. The problem is that in order to reach the fields, each column requires an extra child (I call them .panel ):
width: 100%; box-sizing: border-box; padding: 10px;
This is again almost normal; the problem is that the first and last column have external “fields” ( 10px ), and the “fields” between each column are doubled ( 2 x 10px )
Of course, with the inclusion of a new type of CSS3 calc() value, this could be solved much easier. Something in the direction of:
.width-12 > .panel{ width: 100%; } .width-09 > .panel{ width: calc(75% - 10px); margin: ...; }
I have some Javascript fixes, I hacked some things that "work", but I'm in the quest. Hopefully the most sacred of the grails exists.
The following solution, and one @avall provided (although certainly a good choice to simplify), unfortunately, is not what I am looking for. The main problem is that the fields are not evenly distributed between the columns.
The only way I can see this work is to reduce the .panel indent to 5px and something like:
.column:first-child > .panel { padding-left: 0px; } .column:last-child > .panel { padding-right: 0px; } .column:only-child > .panel { padding-right: 0px; padding-left: 0px; }
This solution is unacceptable only because IE8 cannot recognize the :last-child pseudo :last-child (in this case :only-child ).