CODEWITHSUNDEEP
csshtml
Rowan Freeman
Rowan Freeman

Reputation: 16358

How do I set this div to be the minimum possible width to display its floating contents?

Problem

I have "boxes" that float left so that I can display them in a line until they need to wrap. This works well, but my coloured background doesn't shrink to the minimum, it expands to the maximum.

JSFiddle

http://jsfiddle.net/RLRh6/

(Expand and shrink the Result section to see the effect)

HTML

<div class="container">
    <div class="boxes">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS

.container {
    background: #fcc;
    margin: 0 auto;
    max-width: 300px;
}

.boxes {
    background: #cfc;
    overflow: hidden;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 2px;
}

What I Get

Note the extra green colour, right of the boxes:

Example 1

Example 1

Example 2

Example 2

What I Want

Example 1

Example 1

Example 2

Example 2

Question

Is it possible to have the green-background div (".boxes") shrink to the minimum possible size to display the boxes without Javascript? You should be able to shrink and expand the div freely and not see any green to the right of the boxes.

Upvotes: 18

Views: 13835

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105903

your container will wrap if there's a clear 'break to next line'.

Here is a pen to see different test, just set via CSS how many per line.

3.2.1 is that what you want ?

http://codepen.io/gcyrillus/pen/gHwjz
enter image description here 

.container {
    background: #fcc;
    margin: 0 auto;
    max-width:300px;
    }
.container.table {
  display:table;
}
.boxes {
    background: #cfc;
    display:inline-block ;/* or float */
    vertical-align:top;
}
.box {
    border: 1px dashed blue ;
    width: 70px;
    height: 50px;
    float:left;
    margin: 2px;
}

/* ====== test */
.container {clear:left;margin:1em auto;}
.container.inline-block {
  display:inline-block;
}
.container.table {
  display:table;
}
.container.float {
 float:right
}
section {
  width:450px; 
  margin:auto;
  padding:0.5em 1.5em;
  background:#ddd;
  overflow:hidden;
}
.container:before { /* see classes */
  content:attr(class);
  display:block;
  position:absolute;
  margin-top:-1.2em;
}

/* wrap to next-line */
.float .box:nth-child(1n) {
clear:left;
}
.inline-block .box:nth-child(4n) {
clear:left;
}
.table .box:nth-child(odd) {
clear:left;
}

Upvotes: 2

Roy Sonasish
Roy Sonasish

Reputation: 4599

Remove the min-width from the .container and add display:inline-block;

also if you want to center the .container then wrap the .container with a div and apply text-align:center to it.

.container {
    background: #fcc;
    margin: 0 auto;
   display:inline-block;
}

jsFiddle Link

Upvotes: 4

yeyene
yeyene

Reputation: 7380

Working DEMO http://jsfiddle.net/RLRh6/56/

If you want to achieve this only with html, css, should use media queries.

CSS

.container {
    margin: 0 auto;
    min-width: 76px;
    max-width: 228px;
}
@media only screen and (min-width: 76px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 76px;
  }
}
@media only screen and (min-width: 152px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 152px;
  }
}
@media only screen and (min-width: 228px) {
  .boxes {
      float:left;
      background: #cfc;
      width: 228px;
  }
}
.boxes {
    float:left;
    background: #cfc;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 2px;
}

Upvotes: 9

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

I have done little bit changes in your css, check the jsFiddle link here if it works for you.

Followings are the css chagnes:

.container {
    background: #fcc;
    margin: 0 auto;
    max-width: 300px;
}

.boxes {
    background: #cfc;
    overflow: hidden;
    padding:2px;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 0 2px 2px 0;
}

Upvotes: 0

Related Questions