HTML/CSS grid layout

Question

How could I change this grid layout so that the second row of blocks sit just below the corresponding block above it instead of forming a completely new row?

http://jsfiddle.net/AndyMP/wSvrN/

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
#container {
    position: absolute;
    width: 60%;
    left: 50%;
    margin-left: -30%;
    border: 1px dotted #333;
    padding: 20px;
}
.box1 {
    position: relative;
    float: left;
    width: 100px;
    height: 150px;
    background: #666;
    margin: 0 15px 15px 0;
}
.box2 {
    position: relative;
    float: left;
    width: 100px;
    height: 200px;
    background: #666;
    margin: 0 15px 15px 0;
}
.box3 {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    background: #666;
    margin: 0 15px 15px 0;
}

HTML

<div id="container">

    <div class="box1"></div>
    <div class="box3"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box2"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box3"></div>
    <div class="box2"></div>

</div>

I'm guessing the "float" part of the css only aligns things horizontally and not vertically, but maybe somebody can confirm this. — Andy
– Andy, Commented May 13, 2012 at 11:37
I'm guessing I need to use a plugin like Masonry (masonry.desandro.com) and it isn't possible with just regular CSS. — Andy
– Andy, Commented May 13, 2012 at 11:39

sandeep · Accepted Answer · 2012-05-13 11:55:42Z

4

You can not achieve this with Pure CSS. You have to use http://masonry.desandro.com/ for this.

answered May 13, 2012 at 11:55

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Serge Morel · Accepted Answer · 2012-05-13 11:49:31Z

Do you mean like this ? http://jsfiddle.net/LtLrx/

CSS:

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
#container {
    position: absolute;
    width: 60%;
    left: 50%;
    margin-left: -30%;
    border: 1px dotted #333;
    padding: 20px;
}
.contleft
{
    float: left;
    margin-right: 15px;
    width: 30%;
    position: relative;
    height: 100%;
}
.contmiddle
{
    float: left;
    margin-right: 15px;
    width: 30%;
    position: relative;
    height: 100%;
}
.contright
{
    float: left;
    width: 30%;
    position: relative;
    height: 100%;
}
.box1 {
    position: relative;
    float: left;
    width: 100px;
    height: 150px;
    background: #666;
    margin: 0 15px 15px 0;
}
.box2 {
    position: relative;
    float: left;
    width: 100px;
    height: 200px;
    background: #666;
    margin: 0 15px 15px 0;
}
.box3 {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    background: #666;
    margin: 0 15px 15px 0;
}

HTML:

<div id="container">

    <div class="contleft">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box1"></div>
    </div>
    <div class="contmiddle">
        <div class="box2"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="contright">
        <div class="box3"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box1"></div>
    </div>
</div>

It does the job, but I'm avoiding columns simply because I then have to manually assign any new blocks to the appropriate column. It wouldn't automatically align them correctly when a new DIV is added.

Hidde · Accepted Answer · 2012-05-13 11:30:15Z

1

I don't exactly get what you want. When I put that code into a test file, I get the following in my browser: enter image description here

To me, it looks like the last two blocks are exactly below the other blocks in that same column.

A problem may be that you are specifying the width of the container as a percentage of the screen, and the width of the blocks as an absolute value.

Please comment, so I can make my answer clearer, this is all the info I can make from your question.

answered May 13, 2012 at 11:30

Hidde

12k8 gold badges46 silver badges71 bronze badges

2 Comments

Andy Over a year ago

What I mean is that once there is no room to the right of the last box, a new row is created with the first box sitting tight underneat the first (now above it) and the next sitting tight underneath the second, etc. It might be a container width thing but even with a fixed width, the problem is still there jsfiddle.net/AndyMP/wSvrN/1

Hidde Over a year ago

I understand your problem now. I edited the fiddle without the position and floating, but it doesn't really help. I wonder if this is possible with just CSS. if I find out anything I'll let you know. My fiddle: jsfiddle.net/wSvrN/9

Collectives™ on Stack Overflow

HTML/CSS grid layout

3 Answers 3

Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Related