CODEWITHSUNDEEP
cssresponsive-designalignment
Paweł Fus
Paweł Fus

Reputation: 45079

Packing fixed width div's into fluid container

I have simple structure with container and inside boxes:

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

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

Upvotes: 6

Views: 2481

Answers (6)

G-Cyrillus
G-Cyrillus

Reputation: 106078

Not too sure if you where looking for something like 'flex-justify' , I added in the demo a turn around based on inline-boxes behavior and text-align values.

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

The point is you should not use float, but display.

Float is not friendly with centering , nor vertical nor horizontal, since it is not standing in the natural flow of the 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;
}

Upvotes: 1

Matt Coughlin
Matt Coughlin

Reputation: 18916

@media queries

Use a set of @media queries to define different layouts for the grid based on the current screen size. The only part of the layout that needs to vary is the width of the grid wrapper.

For all practical purposes, this is the only CSS solution available at present. For an explanation of why @media queries are appropriate, and why other available CSS options won't work, see this answer.

JSFiddle Demo

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

Note: This solution requires adding a wrapper div around the blocks. In each @media query, the width of the wrapper is just enough to fit the number of columns appropriate for the current screen size. The fixed wrapper width is what allows the grid as a whole to be centered within #container. If editing the static HTML isn't an option, the wrapper div can be added when the page loads 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 */
}
...

Upvotes: 7

Airen
Airen

Reputation: 2169

You can use the text-align:justify for the container and use the display:inline-block for the div.block. but you need add some placeholder tag at the 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;
}

Please view the demo. A detailed tutorial, please click here.

Upvotes: 0

Skrivener
Skrivener

Reputation: 1033

Try this:

#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 truly need everything left-aligned then I think you're out of luck with just CSS.

Upvotes: 0

Shuvojit Das
Shuvojit Das

Reputation: 193

I think, everything you have almost done already.

#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/

Upvotes: 0

Alan Piralla
Alan Piralla

Reputation: 1196

I hope this will do the trick:

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;
}

Upvotes: 1

Related Questions