Is it possible to create pure CSS class for solving this question in modern browser(IE8+, FF3+, Chrome 3+ and etc.)?

Question

From the above picture, I have 3 CSS classes() for using in this layout.

parent for Black box class

.parent
{
   width: 1000px;
   height: 90px;
}

big for Red box class

.big
{
   width: 200px;
   height: 90px;
}

small forYellow box class

.small
{
   width: 200px;
   height: 30px;
}

HTML for Figure 1 should be like this.

<div class="parent">
   <div class="big"></div>
   <div class="big"></div>
   <div class="small"></div>
   <div class="small"></div>
   <div class="small"></div>
   <div class="big"></div>
   <div class="small"></div>
</div>

And HTML for Figure 2 should be like this.

<div class="parent">
   <div class="big"></div>
   <div class="big"></div>
   <div class="small"></div>
   <div class="small"></div>
   <div class="big"></div>
   <div class="small"></div>
   <div class="small"></div>
</div>

Is it possible to create pure CSS class for solving this problem without modify any tag in HTML?

Thanks,

Answer 1

Yes, if you are certain of all the dimensions (i.e. they don't need to adjust dynamically based on their content), this is all very simple using absolute positioning:

.parent > * {
  position: absolute;
}

.big {
  top: 0;
}

.big + .big {
  left: 200px;
}

.big + .small {
  top: 0;
}

.big + .big + .small {
  left: 400px;
}

.big + .big + .small + .small {
  top: 30px;
  left: 400px;
}

.big + .big + .small + .small + .small {
  top: 60px;
  left: 400px;
}

.small + .big {
  left: 600px;
}

.small + .big + .small {
  left: 800px;
}

.small + .big + .small + .small {
  top: 30px;
  left: 800px;
}

But I don't recommend it as a robust solution in most cases. If you have a little more control of the HTML, and can add some containing divs around your .smalls, you could do something much more robust and flexible using floats.