One list, simple float left, different cell sizes

Question

I have a nice challenge for you. Here you have the next code (live example: http://inturnets.com/test/test.html):

    <!DOCTYPE html><html><head><title></title>
<style type="text/css">* {
        margin: 0;
        padding: 0;}a, a:hover {
        text-decoration: none;
    }
    .grid {
        width: 984px;
        margin: 0 auto;
        list-style: none;
        height: 666px;
    }
    .grid li {
        float: left;
        position: relative;
    }
    .small + .small {
        position: relative;
        clear: left;
    }
    .large, .large a {
        width: 393px;
        height: 222px;
    }
    .small, .small a {
        width: 198px;
        height: 111px;
    }
    .small a, .large a {
        display: block;
        cursor: pointer;
        color: #fff;
    }
    .overlay {
        background: #000;
        width: 100%;
        height: 22px;
        color: #fff;
        opacity: 0;
        position: absolute;
        top: 0;
    }
    </style>
    </head>
    <body>

    <ul class="grid">
      <li class="item small"><a href="#" title="Title 1"><div class="overlay">Title 1</div><img src="img/squares.png" border="0" width="198" height="111" /></a></li>
      <li class="item small"><a href="#" title="Title 2"><div class="overlay">Title 2</div><img src="img/space.png" border="0" width="198" height="111" /></a></li>
      <li class="item large"><a href="#" title="Title 3"><div class="overlay">Title 3</div><img src="img/arch.png" border="0" width="393" height="222" /></a></li>
      <li class="item large"><a href="#" title="Title 4"><div class="overlay">Title 4</div><img src="img/tree.png" border="0" width="393" height="222" /></a></li>
      <li class="item large"><a href="#" title="Title 5"><div class="overlay">Title 5</div><img src="img/arch.png" border="0" width="393" height="222" /></a></li>
      <li class="item large"><a href="#" title="Title 6"><div class="overlay">Title 6</div><img src="img/tree.png" border="0" width="393" height="222" /></a></li>
      <li class="item small"><a href="#" title="Title 7"><div class="overlay">Title 7</div><img src="img/squares.png" border="0" width="198" height="111" /></a></li>
      <li class="item small"><a href="#" title="Title 8"><div class="overlay">Title 8</div><img src="img/space.png" border="0" width="198" height="111" /></a></li>
      <li class="item large"><a href="#" title="Title 9"><div class="overlay">Title 9</div><img src="img/tree.png" border="0" width="393" height="222" /></a></li>
      <li class="item small"><a href="#" title="Title 10"><div class="overlay">Title 10</div><img src="img/squares.png" border="0" width="198" height="111" /></a></li>
      <li class="item small"><a href="#" title="Title 11"><div class="overlay">Title 11</div><img src="img/space.png" border="0" width="198" height="111" /></a></li>
      <li class="item large"><a href="#" title="Title 12"><div class="overlay">Title 12</div><img src="img/arch.png" border="0" width="393" height="222" /></a></li>
    </ul>
    </body>
    </html>

Tasks:

one single list (ok)
simple float:left for the LI's (ok)
align the cells like on the next picture (not yet done)

enter image description here

Tips:

as you see the second .small class has position relative
you don't need anything special on the second small one
you need to do some other things
so you then need to push the item back into it's correct position
and then you need to fix the empty space it leaves

You should replace `img/squares.png` et al. with images from http://dummyimage.com/. — thirtydot, Mar 25 '11 at 11:02

score 5 · Accepted Answer · answered Mar 25 '11 at 11:29

5

@hun i Try from my side may be that's help you:

.small + .small {
        position: relative;
        margin-left:-198px;
        margin-top:111px
    }

answered Mar 25 '11 at 11:29

sandeep

85,904
23
131
151

The easiest solution for sure. That sneaky `clear: left` screwed me over when I tried this, didn't notice it. – thirtydot Mar 25 '11 at 12:17

score 4 · Answer 2 · edited May 23 '17 at 12:07

I'm not sure how to do it using floats.

Here's a solution using display: inline-block instead.

The only difference I can see between the display of my code and your goal picture is that the order of the two small images on the right is inverted.

However, I'm not going to try to fix it, because the order of images in your goal picture is wrong (or so I think):

Your source code has:

Image 6 - img/tree.png
Image 7 - img/squares.png
Image 8 - img/space.png

But in your goal picture, space is on top of squares, which is inconsistent with the other instances of the "two small images".

Without further ado:

The changes:

I removed the whitespace between the <li> tags. You could workaround having to do this.

New CSS:

.grid li {
    position: relative;
    display: inline-block;
    vertical-align: top;

    *display: inline;
    zoom: 1
}
.small + .small {
    position: relative;
    clear: left;
    top: 111px;
    margin-left: -198px
}

I included the hacks required to make display: inline-block work in IE7.
Tested in IE7/8, and recent versions of: Chrome, Firefox, Safari, Opera.

+1 Seems to be another great solution. I think the 'swapped image' stuff is not really a problem, looking at the original HTML (which both of us did). I think the image included with the question can be considered an illustration. If OP swaps the images in the HTML, they will appear in the right way with both your and my solution. — kapa, Mar 25 '11 at 12:06
thanks for your effort man! the code that i will use is from @sandeep. The orde of the images was correct, just to respond to an earlier message of you. very interesting solution was also yours. i will keep in my mind. vote up ;) — Grávuj Miklós Henrich, Mar 25 '11 at 12:13

kapa · Answer 3 · 2011-03-25T14:35:54.767

4

I have created a working demo.

I stripped your appearing title divs, a bit shortened the HTML, and kept everything to a minimum, so the final CSS looks like this:

ul,li { margin: 0; padding: 0; }
a, a:hover { text-decoration: none; }

.grid { width: 984px; margin: 0 auto; list-style: none; height: 666px; }
.grid li { float: left; position: relative; }
.small + .small { margin: 111px 0 0 -198px; }
.large, .large a, .large img { width: 393px; height: 222px; }
.small, .small a, .small img { width: 198px; height: 111px; }
.item a { display: block; cursor: pointer; color: #fff; }

From this base, it seems to be safe to add those title divs and stuff.

Tested only on Firefox, but I don't really see a reason why it would not work on other browsers (tell me if I'm wrong). Well, except the + selector, but it was in your original CSS either.

edited Mar 25 '11 at 14:35

answered Mar 25 '11 at 11:55

kapa

72,859
20
152
173

+1, looks fine to me. Note that you have the same "swapped image" situation that I do (check my answer). – thirtydot Mar 25 '11 at 12:00
thanks man! it helped me a lot my vision about list structures. i voted your answer, however i will accept the answer from @sandeep as i am using that one :) – Grávuj Miklós Henrich Mar 25 '11 at 12:12
@The Hun : Thanks, glad to help. And it's allright whichever you accept, all three solutions are good. – kapa Mar 25 '11 at 12:21
I rolled back, and added an example that does not have any reference to your company, images, or anything. Please do not remove it, it might be useful for future searchers. – kapa Mar 25 '11 at 14:36
thanks for the change, it was my mistake. next time i will pay more attention :) – Grávuj Miklós Henrich Mar 25 '11 at 17:42

One list, simple float left, different cell sizes

3 Answers3

Linked