Packing a fixed width div in a liquid container

Question

I have a simple structure with a container and inside the boxes:

<div id="container"> <div class="block"></div> // more blocks <div class="block"></div> </div> 

What I would like to achieve is to center the boxes inside this container, but pack them as much as possible on one line. I can do the same with JS: http://jsfiddle.net/JhxSd/ , but I would like to avoid this and use only CSS. Is it possible?

Answer 1

@Media queries

Use the @media query set to define different layouts for the grid based on the current screen size. The only part of the layout that needs to be resized is the width of the grid.

For all practical purposes, this is the only CSS solution currently available. For an explanation of the reasons @media queries are appropriate and why other available CSS options will not work, see this answer .

JSFiddle Demo

The demo above has @media requests for screen sizes up to 1200px wide (more can be added as needed) and does not use JavaScript. The resulting #container width #container always 75% (not counting the border), and the grid is in the center of #container .

Note. This solution requires adding a wrapper div around the blocks. In each @media request, the width of the wrapper is enough to match the number of columns suitable for the current screen size. A fixed wrapper width is what allows the grid as a whole to center within the #container . If editing static HTML is not an option, a div-wrapper can be added when loading a page using jQuery.

HTML

 <div id="container"> <div class="grid-wrapper"> <div class="block"></div> ... </div> </div> 

CSS

 #container { width: 75%; ... } .grid-wrapper { margin: 0 auto; width: 70px; /* Default: 1 column */ } @media (min-width: 200px) { .grid-wrapper {width: 140px;} /* 2 columns */ } @media (min-width: 290px) { .grid-wrapper {width: 210px;} /* 3 columns */ } ... 

Answer 2

Hope this works:

http://jsfiddle.net/CnjZR/1/

 <div id="container"> <div id="wrap"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> 

CSS

 #container { width: 100%; overflow: hidden; background: red; text-align: center; } .block { width: 20px; height: 20px; background: blue; float: left; margin: 5px; } #wrap { background: green; overflow: hidden; display: inline-block; } 

Answer 3

Not too sure if you are looking for something like "flex-justify", I added a rotation to the demo based on the behavior of inline boxes and text alignment values.

edit: dot cleared: text-align: center; this is. http://jsfiddle.net/JhxSd/10/

The fact is that you should not use float, but show.

Float is not friends with centering, either vertically or horizontally, since it is not in the natural flow of a document .

  #container { width: 75%; border: 1px solid; text-align:center; overflow:hidden; padding:1em 1em 0; box-sizing:border-box; float:left; } #container .block { width: 50px; height: 50px; background-color: blue; display:inline-block; margin: 10px; } 

Answer 4

I think all that you have almost done.

 #container { width: 75%; border: 1px solid; float: left; } #container .block { width: 50px; height: 50px; background-color: blue; float: left; margin: 10px; overflow: hidden; } 

http://jsfiddle.net/JhxSd/3/

Answer 5

Try the following:

 #container { width: 75%; border: 1px solid; float: left; overflow: hidden; text-align: center; } #container .block { display: inline-block; width: 50px; height: 50px; background-color: blue; margin: 10px; } 

If you really need everything aligned to the left, I think you're out of luck with just CSS.

Answer 6

You can use text-align:justify for the container and use display:inline-block for div.block . but you need to add the placeholder tag last. Like this:

HTML

 <div class="wrapper"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> <div class="block">8</div> <div class="block">9</div> <div class="block">10</div> <div class="block">11</div> <div class="block">12</div> <div class="block">13</div> <div class="block">14</div> <div class="block">15</div> <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> </div> 

CSS

 .wrapper { width: 75%; border: 1px solid; font-size: 0.1px; text-align: justify; } .wrapper:after { content:""; display:inline-block; width: 100%; } .wrapper div{ font-size: 16px; display:inline-block; *display: inline; zoom:1; color: #fff; background-color:blue; width: 50px; height: 50px; margin: 10px; } .wrapper .placeholder { width: 50px; height: 0px; background:none; } 

Watch the demo. Detailed guide, please click here .