Fluid width with equally spaced DIVs

Question

I have a fluid width container DIV   Within this I have 4 DIVs all 300px x 250px      lt div id  container  gt      lt div class  box1  gt   lt  div gt      lt div class  box2  gt   lt  div gt      lt div class  box3  gt   lt  div gt      lt div class  box4  gt   lt  div gt   lt  div gt    What I want to happen is box 1 to be floated left  box 4 to be floated right and box 2 and 3 to be spaced evenly between them   I want the spacing to be fluid as well so as the browser is made smaller the space becomes smaller also

User · Answer

The easiest way to do this now is with a flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

The CSS is then simply:

#container {
    display: flex;
    justify-content: space-between;
}

demo: http://jsfiddle.net/QPrk3/

However, this is currently only supported by relatively recent browsers (http://caniuse.com/flexbox). Also, the spec for flexbox layout has changed a few times, so it's possible to cover more browsers by additionally including an older syntax:

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

User · Answer

If you know the number of elements per  row  and the width of the container you can use a selector to add a margin to the elements you need to cause a justified look   I had rows of three divs I wanted justified so used the     tile nth-child 3n 2    margin  0 10px    this allows the center div in each row to have a margin that forces the 1st and 3rd div to the outside edges of the container  Also great for other things like borders background colors etc

User · Answer

See  http   jsfiddle net thirtydot EDp8R    This works in IE6  and  all modern browsers  I ve halved your requested dimensions just to make it easier to work with  text-align  justify combined with  stretch is what s handling the positioning  display inline-block   display inline  zoom 1 fixes inline-block for IE6 7  see here  font-size  0  line-height  0 fixes a minor issue in IE6     x000D   x000D   container   x000D    border  2px dashed  444  x000D    height  125px  x000D    text-align  justify  x000D    -ms-text-justify  distribute-all-lines  x000D    text-justify  distribute-all-lines  x000D       just for demo    x000D    min-width  612px  x000D    x000D   x000D   box1  x000D   box2  x000D   box3  x000D   box4   x000D    width  150px  x000D    height  125px  x000D    vertical-align  top  x000D    display  inline-block  x000D     display  inline  x000D    zoom  1 x000D    x000D   x000D   stretch   x000D    width  100   x000D    display  inline-block  x000D    font-size  0  x000D    line-height  0 x000D    x000D   x000D   box1  x000D   box3   x000D    background   ccc x000D    x000D   x000D   box2  x000D   box4   x000D    background   0ff x000D    x000D   lt div id  container  gt  x000D     lt div class  box1  gt  lt  div gt  x000D     lt div class  box2  gt  lt  div gt  x000D     lt div class  box3  gt  lt  div gt  x000D     lt div class  box4  gt  lt  div gt  x000D     lt span class  stretch  gt  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    The extra span   stretch  can be replaced with  after   This still works in all the same browsers as the above solution   after doesn t work in IE6 7  but they re using distribute-all-lines anyway  so it doesn t matter   See  http   jsfiddle net thirtydot EDp8R 3   There s a minor downside to  after  to make the last row work perfectly in Safari  you have to be careful with the whitespace in the HTML   Specifically  this doesn t work    lt div id  container  gt              lt div class  box3  gt  lt  div gt       lt div class  box4  gt  lt  div gt   lt  div gt    And this does    lt div id  container  gt              lt div class  box3  gt  lt  div gt       lt div class  box4  gt  lt  div gt  lt  div gt      You can use this for any arbitrary number of child divs without adding a boxN class to each one by changing   box1   box2   box3   box4         to   container  gt  div         This selects any div that is the first child of the  container div  and no others below it  To generalize the background colors  you can use the CSS3 nth-order selector  although it s only supported in IE9  and other modern browsers    box1   box3         becomes    container  gt  div nth-child odd          See here for a jsfiddle example

User · Answer

If css3 is an option  this can be done using the css calc   function   Case 1  Justifying boxes on a single line   FIDDLE    Markup is simple - a bunch of divs with some container element   CSS looks like this   div       height  100px      float  left      background pink      width  50px      margin-right  calc  100  - 300px    5 - 1px      div last-child       margin-right 0      where -1px to fix an IE9  calc rounding bug - see here  Case 2  Justifying boxes on  multiple lines   FIDDLE    Here  in addition to the calc   function  media queries are necessary   The basic idea is to set up a media query for each  columns states  where I then use calc   to work out the margin-right on each of the elements  except the ones in the last column    This sounds like a lot of work  but if you re using LESS or SASS this can be done quite easily    It can still be done with regular css  but then you ll have to do all the calculations manually  and then if you change your box width - you have to work out everything again   Below is an example using LESS   You can copy paste this code here to play with it   it s also the code I used to generate the above mentioned fiddle     min-margin  15px   div-width  150px    3divs    div-width   3    4divs    div-width   4    5divs    div-width   5    6divs    div-width   6    7divs    div-width   7     3divs-width    3divs    min-margin   2    4divs-width    4divs    min-margin   3    5divs-width    5divs    min-margin   4    6divs-width    6divs    min-margin   5    7divs-width    7divs    min-margin   6       margin 0 padding 0     container       overflow  auto      display  block      min-width   3divs-width     container  gt  div       margin-bottom  20px      width   div-width      height  100px      background  blue      float left      color   fff      text-align  center      media  max-width   3divs-width         container  gt  div             margin-right   min-margin             container  gt  div nth-child 3n              margin-right  0            media  min-width   3divs-width  and  max-width   4divs-width         container  gt  div             margin-right    calc  100  -   3divs   2 - 1px               container  gt  div nth-child 3n              margin-right  0            media  min-width   4divs-width  and  max-width   5divs-width         container  gt  div             margin-right    calc  100  -   4divs   3 - 1px               container  gt  div nth-child 4n              margin-right  0            media  min-width   5divs-width  and  max-width   6divs-width         container  gt  div             margin-right    calc  100  -   5divs   4 - 1px               container  gt  div nth-child 5n              margin-right  0            media  min-width   6divs-width        container  gt  div             margin-right    calc  100  -   6divs   5 - 1px               container  gt  div nth-child 6n              margin-right  0            So basically you first need to decide a box-width and a minimum margin that you want between the boxes   With that  you can work out how much space you need for each state   Then  use calc   to calcuate the right margin  and nth-child to remove the right margin from the boxes in the final column   The advantage of this answer over the accepted answer which uses text-align justify is that when you have more than one row of boxes - the boxes on the final row don t get  justified  eg  If there are 2 boxes remaining on the final row - I don t want the first box to be on the left and the next one to be on the right - but rather that the boxes follow each other in order   Regarding browser support  This will work on IE9  Firefox Chrome Safari6 0  -  see here for more details  However i noticed that on IE9  there s a bit of a glitch between media query states   if someone knows how to fix this i d really like to know          lt -- FIXED HERE

User · Answer

in jQuery you might target the Parent directly      THIS IS USEFUL IF YOU DO NOT KNOW EXACTLY HOW MANY CHILDREN WILL BE   ADDED DYNAMICALLY or IF YOU JUST CAN T FIGURE OUT THEIR NUMBER    var tWidth 0       children   each function i e   tWidth      e  width        Example  If the Children have a padding-left of 10px      You could do instead  tWidth       e  width   10           parent   css  width  tWidth     This will let the parent grow horizontally as the children are beng added   NOTE  This assumes that the   children  have a width and Height Set  Hope that Helps

User · Answer

Other posts have mentioned flexbox  but if more than one row of items is necessary  flexbox s space-between property fails  see the end of the post   To date  the only clean solution for this is with the  CSS Grid Layout Module  Codepen demo   Basically the relevant code necessary boils down to this   ul     display  grid      1       grid-template-columns  repeat auto-fit  120px       2       grid-gap  1rem      3       justify-content  space-between      4       align-content  flex-start      5         1  Make the container element a grid container  2  Set the grid with an  auto  amount of columns - as necessary  This is done for responsive layouts  The width of each column will be 120px   Note the use of auto-fit  as apposed to auto-fill  which  for a 1-row layout  collapses empty tracks to 0 - allowing the items to expand to take up the remaining space   check out this demo to see what I m talking about      3  Set gaps gutters for the grid rows and columns - here  since want a  space-between  layout - the gap will actually be a minimum gap because it will grow as necessary   4  and 5  - Similar to flexbox    x000D   x000D  body   x000D    margin  0  x000D    x000D  ul   x000D    display  grid  x000D    grid-template-columns  repeat auto-fit  120px   x000D    grid-gap  1rem  x000D    justify-content  space-between  x000D    align-content  flex-start  x000D     x000D       boring properties     x000D    list-style  none  x000D    width  90vw  x000D    height  90vh  x000D    margin  2vh auto  x000D    border  5px solid green  x000D    padding  0  x000D    overflow  auto  x000D    x000D  li   x000D    background  tomato  x000D    height  120px  x000D    x000D   lt ul gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Codepen demo  Resize to see the effect     Browser Support - Caniuse  Currently supported by Chrome  Blink   Firefox  Safari and Edge      with partial support from IE  See this post by Rachel Andrew    NB   Flexbox s space-between property works great for one row of items  but when applied to a flex container which wraps it s items -  with flex-wrap  wrap  - fails  because you have no control over the alignment of the last row of items  the last row will always be justified  usually not what you want   To demonstrate    x000D   x000D  body   x000D    margin  0  x000D    x000D  ul   x000D     x000D    display  flex  x000D    justify-content  space-between  x000D    flex-wrap  wrap  x000D    align-content  flex-start  x000D     x000D    list-style  none  x000D    width  90vw  x000D    height  90vh  x000D    margin  2vh auto  x000D    border  5px solid green  x000D    padding  0  x000D    overflow  auto  x000D     x000D    x000D  li   x000D    background  tomato  x000D    width  110px  x000D    height  80px  x000D    margin-bottom  1rem  x000D    x000D   lt ul gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Codepen  Resize to see what i m talking about     Further reading on CSS grids    MDN  Jen Simmons - Learn CSS grid  A Complete Guide to CSS Grid   Codrops CSS Reference   A Complete Guide to Grid - CSS Tricks

User · Answer

This worked for me with 5 images in diferent sizes    Create a container div An Unordered list for the images On css the unordened must be displayed vertically and without bullets Justify content of container div   This works because of justify-content space-between  and it s on a list  displayed horizontally    On CSS           container               display  flex              justify-content  space-between          container ul li  display inline  list-style-type none      On html   lt div id  container  gt      lt ul gt             lt li gt  lt img src  box1 png  gt  lt li gt           lt li gt  lt img src  box2 png  gt  lt li gt           lt li gt  lt img src  box3 png  gt  lt li gt           lt li gt  lt img src  box4 png  gt  lt li gt           lt li gt  lt img src  box5 png  gt  lt li gt       lt  ul gt   lt  div gt

[html] Fluid width with equally spaced DIVs

Examples related to html

Examples related to css

Examples related to fluid-layout