1

Sorry for the title, but I really wasn't sure how to word it. I've been looking around google and SO and have been trying to find something similar, I'm sure that people have asked before so I apologize if my search wasn't thorough enough.

I am trying to put together a layout that looks like this

enter image description here

I'm trying to figure out if there is a pure CSS way of doing this without having to assign special classes to the top row/bottom row and start/end of each row. This is also being created with the intent that it will be filled dynamically and scroll if the there are more than 6 boxes. Taking the scrollbar height/width out of the picture is there a way to create this layout with pure CSS or am I going to have to look at a javascript solution?

I looked at using the flexbox, but I need this to be compatible down to IE8 at least so I can't really go that route.

thanks so much.

Wex
  • 15,539
  • 10
  • 64
  • 107
Brodie
  • 8,399
  • 8
  • 35
  • 55
  • Are there fixed or fluid heights for the inner and outer boxes? – Wex Dec 30 '11 at 22:52
  • The inner and outer boxes at this point both have fixed width, however I'd rather the outer box not have a fixed width/height in the event that we decide to change the size of the inner boxes. The whole mantra that our CTO has is that all container elements should be fluid so that we can just edit the child elements as needed and stick them in. It's because a lot of our content is generated dynamically so we need to have a very responsive container ui scheme. – Brodie Dec 30 '11 at 22:57

1 Answers1

1

You can easily achieve this by floating them or displaying them inline-block.

<div class="inline-block">
    <span></span><span></span><span></span><span></span><span></span><span></span>
</div>

<div class="float">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

div {
    background: blue;
    margin: 0 0 10px;
    width: 330px; }
span {
    background: red;
    width: 100px;
    height: 50px;
    margin: 5px; }
.inline-block { 
    line-height: 0; }
.inline-block span { display: inline-block; }
.float { overflow: hidden; }
.float span { float: left; }

Preview: http://jsfiddle.net/Wexcode/upFPC/

Wex
  • 15,539
  • 10
  • 64
  • 107
  • I really appreciate the answer... it's actually what I'm doing right now. I have all of the inner elements with a 10px margin... but the mockup the designers gave me has 0 spacing between the inner and outer boxes. When I write up the functionality for the box I might just add in positioning as well.. Although I knew chances were slim I wanted to see if there was a way to accomplish this with no js. – Brodie Dec 30 '11 at 23:12
  • I like the solution... I'm going to catch hell for the negative margin declarations, but... it'll work. I'm guess it's the only way to make it work. Thanks @wex – Brodie Dec 30 '11 at 23:33
  • Well, I'm sure they'll be happier to see negative margins than tables ;) - glad to help. – Wex Dec 30 '11 at 23:41
  • This is quite similar to this question which may give you insight [CSS fluid columns, fixed margins; the holy grail of holy grails](http://stackoverflow.com/questions/7190768/css-fluid-columns-fixed-margins-the-holy-grail-of-holy-grails/7256297#7256297) –  Dec 30 '11 at 23:41
  • @benvie - I have a headache just LOOKING at the code and the design. – Wex Dec 30 '11 at 23:51