Question

I have a centred div with floating elements in it, each element has the same height and width and is floating. When the div is resized, there is always a gap on the right side where there isnt enough space to fit another element. What I want is for the div to only expand when it can fit another element rather than just have a space there. Is that possible?

Answer 1

CSS3 Solution

Using some @media query calls (so there is a practical limit to how large one might want to go), yields a good result on CSS3 browsers. See this fiddle (full screen), which uses this (just for example) code:

HTML

<ul class="container">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul> 

CSS

@media screen and (min-width: 122px) {
  .container {width: 120px;}
}

@media screen and (min-width: 242px) {
  .container {width: 240px;}
}

@media screen and (min-width: 362px) {
  .container {width: 360px;}
}

@media screen and (min-width: 482px) {
  .container {width: 480px;}
}

@media screen and (min-width: 602px) { 
  .container {width: 600px;}
}

/* you need to decide just how far to take it */

.container {
    margin: 10px auto;
    overflow: hidden;
    border: 1px solid red;
    height: 210px;
}

li {
    width: 100px;
    height: 50px;
    background: cyan;
    float: left;
    margin: 10px;
}

Also, it is possible that you or other users might find this helpful.