Geek asks and answers

Adaptive layout uneven height

I’m trying to think about how to deal with a certain web page design over the past few days, but so far I haven’t been able to come up with any elegant solutions.

To summarize the project briefly, there are 3 columns of containers in which containers have uneven (dynamically generated) heights but the same (flowing) widths. They should be laid out so that they are in a numerical sequence going from left to right; i.e. 1-2-3 in the top row, then 4-5-6 in the second row, etc.

Now, what really ruins my nut, he is trying to draw this line neatly without a lot of extra “vertical spacing” between the containers. I created the following code layout (also available as a JSFiddle under code blocks) to illustrate:

HTML

<div class="wrapper" id="wrapper">
    <div class="container small"  id="container_1">1</div>
    <div class="container large"  id="container_2">2</div>
    <div class="container small"  id="container_3">3</div>
    <div class="container medium" id="container_4">4</div>
    <div class="container small"  id="container_5">5</div>
    <div class="container medium" id="container_6">6</div>
    <div class="container large"  id="container_7">7</div>
    <div class="container medium" id="container_8">8</div>
    <div class="container large"  id="container_9">9</div>
    <div class="clearfix"></div>
</div>

CSS

.wrapper {
    width: 100%;
    padding: 5%;
}
.clearfix {
    clear: both;
}
.container {
    display: block;
    float: left;
    width: 25%;
    margin: 2.5%;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.small {
    height: 100px;
    background: red;
}
.medium {
    height: 150px;
    background: green;
}
.large {
    height: 200px;
    background: blue;
}

JSFiddle: http://jsfiddle.net/tzikas/MYgNx/

Note. Since the column layout itself ultimately breaks into two / one columns based on the width of the device, I included a simple "Toggle layout" button in the JSFiddle to emulate this.

What I would like to help figure out is as follows:

  • How to get rid of excessive vertical distance between for example, "1" and "5" or "2" and "6"?
  • "4" "1" "3" ( )?

, , DOM , , mooTools - " ".

+5

More articles:


All Articles