html - Fixed width columns with fluid gutters -

html - Fixed width columns with fluid gutters -

i know can done columns, have back upwards ie.

i'm trying layout columns fixed width, gutters beingness fluid.

i couldn't work floats, settled on using justified inline-block items:

html

<div class="wrapper"> <div></div> <div></div> <div></div> <!-- more divs... --> </div>

css

class="lang-css prettyprint-override">.wrapper { text-align: justify; } .wrapper div { width: 100px; display: inline-block; }

this works wonderfully, lastly row of divs aligned left: http://jsfiddle.net/eshh3/

the solution found add together additional unnecessary divs: http://jsfiddle.net/eshh3/1/

i sense uncomfortable this, i'd know if there other options.

please don't tell me not re-invent wheel. have not found fluid grid scheme supports fluid gutters.

for want do, i'm afraid css solution not available @ moment, much less if want work in ie8.

since want have (a) items in html source list (b) variable number of columns depending on available space (c) column spacing depending on width of container think solution you'll need have employ @ to the lowest degree bit of javascript.

consider on of frameworks proposed in other answers. 1 i've worked , want masonry (or for-pay bigger brother isotope). (there's non-jquery version of masonry). you'll have come function when page resized, recalculates desired gutter , reconfigures framework. along lines of calculating x = how many items fit per line based on container width , item width , dividing remaining space x-1.

if want stick thought of adding div's markup, alternative hear resize events, , add together divs needed based on width , how many items fit per line.

original answer, failed fit criteria.

since you're relying on text-align: justified reason lastly line doesn't expand total width because there's no line break @ end of it. accomplish add together element wrapper:after {} rule, inline block width of 100% guaranties line break.

see fiddle

the css ends like:

.wrapper { text-align: justify; width: 380px; margin: 0 auto; } .wrapper div { width: 100px; display: inline-block; } .wrapper:after {content: ''; width: 100%; display: inline-block; background: pink; height: 2px; overflow: hidden}

note pinkish background there can see element is. might need play border/margin/padding of element or wrapper content comes after wrapper doesn't gain margin. in chrome unfortunately there's slight missalignment of lastly row items, perchance because of space between lastly div , false element.

html css html5 grid fluid-layout