Fix this grid using CSS Floats (or another method)

Question

I want to achieve this grid layout using floats (or another method): enter image description here

But I cannot get to move grid number 8 (numbering in natural order left to right top to down) to occupy its position in left. HTML:

<div class="blockContainer">

                    <ul id="RnP" class=" rnp">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li id="bigbox">6</li>
                        <li >7</li>
                        <li >8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                    </ul>
                </div>

CSS:

.blockContainer{
    position: absolute;
    top:20%;
    left:20%;
    border:1px solid red;
    width: 37em;
}
.rnp li{
    background: blue;
    width: 8em;
    height: 8em;
    color: yellow;
    margin-left: 1em;
    margin-top: 1em;
    float: left;
    padding: 0;
    list-style: none;
}
#bigbox{
    width: 17em;
    height: 17em;   
}
.rnp{
    margin: 0px;
    padding: 0px;
}

JS FIDDLE:http://jsfiddle.net/ebbj2sch/

Not possible using floatdue to the way it functions AFAIK. — Paulie_D
– Paulie_D, Commented Aug 31, 2014 at 7:41
You could probably hack something together but I think your best option would be something like masonry.js — Paulie_D
– Paulie_D, Commented Aug 31, 2014 at 7:49
What about using css? as in display: table-row display: table-cell and so on? — Gil
– Gil, Commented Aug 31, 2014 at 8:18

pstenstrm · Accepted Answer · 2014-08-31 07:54:59Z

I don't think it's possible with the markup you are using. Maybe with flexbox but an easier way would be to wrap the boxes next to the big one in an extra element.

<div class="blockContainer">
    <div id="RnP" class=" rnp">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div>
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
        <div id="bigbox">7</div>
        <div>
            <div class="box">8</div>
            <div class="box">9</div>
        </div>
        <div class="box">10</div>
        <div class="box">11</div>
        <div class="box">12</div>
        <div class="box">13</div>
    </div>
</div>

And change the CSS to something like:

.blockContainer{
    position: absolute;
    top:20%;
    left:20%;
    border:1px solid red;
    width: 37em;
}
.rnp .box{
    background: blue;
    width: 8em;
    height: 8em;
    color: yellow;
    margin-left: 1em;
    margin-top: 1em;
    padding: 0;
    list-style: none;
}

.rnp > div{
    float: left;
}

#bigbox{
    width: 17em;
    height: 17em;   
}
.rnp{
    margin: 0px;
    padding: 0px;
}

avrahamcool · Accepted Answer · 2014-08-31 10:06:28Z

Working solution in this Fiddle

this is not the optimal solution, but it may work for you. I'm assuming that your layout is fixed (the number of boxes, the order and etc').

also: in your fiddle, you used em for units, so i'll do the same. (that's the reason I had to remove white spaces between the <li> in the HTML.)

HTML

<div>
    <ul>
        <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li id="Big">6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
div{
    border: 1px solid red;
    width: 37em;
}
ul
{
    position: relative;
    list-style: none;
}
li {
    background: blue;
    width: 8em;
    height: 8em;
    color: yellow;
    display: inline-block;
    margin-left: 1em;
    margin-top: 1em;
}
#Big
{
    width: 17em;
    height: 17em;
}
#Big + li + li
{
    position: absolute;
    top: 18em;
    left: 0;
}
#Big + li + li + li
{
    position: absolute;
    top: 18em;
    left: 27em;
}

Collectives™ on Stack Overflow

Fix this grid using CSS Floats (or another method)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related