Search code examples
jquerycsspositioningtiles

10 Tiles positioning with jQuery or CSS

I'm kind of new to CSS and jQuery. I'm trying to position tiles on a website as follows:

boxes

I've been trying with CSS and the jQuery Masonry, but the closest I've gotten was like this:

now

Any one have any clues how I can get the tiles positioned like that.

<body>

<nav id="container">
    <div class="t1">1</div>
    <div class="t2">2</div>
    <div class="t3">3</div>
    <div class="t4">4</div>
    <div class="t5">5</div>
    <div class="mi">MIDDLE</div>
    <div class="t6">6</div>
    <div class="t7">7</div>
    <div class="t8">8</div>
    <div class="t9">9</div>
    <div class="t10">10</div>
</div>
</div>
</nav>

CSS

#container {
    margin:auto;
    cursor:pointer;
    width:600px;
    margin-top:140px;
}
.t1, .t2 {
padding:8px;
height:120px;
width:300px;
float:left;
background-color:orange;
border:black thin solid;
}
.t3, .t4, .t5 {
padding:8px;
height:120px;
width:240px;
float:left;
background-color:orange;
border:black thin solid;
}

.t6, .t7, .t8 {
padding:8px;
height:120px;
width:30%;
float:left;
background-color:orange;
border:black thin solid;
}

.t9, .t10 {
padding:8px;
height:120px;
width:300px;
float:left;
background-color:orange;
border:black thin solid;
}
.mi {
height:360px;
width:400px;
background-color:blue;
float:left;
}
Solution

  • This is my final code, using Bootstrap:

    HTML 

    <div class="row">
<div class="span6">BOX 1</div>
<div class="span6">BOX 2</div>
</div>
<div class="row">
<div class="span2">
    <div class="row">
        <div class="span12">BOX 3</div>
    </div>
    <div class="row">
        <div class="span12">BOX 4</div>
    </div>
    <div class="row">
        <div class="span12">BOX 5</div>
    </div>
</div>
<div class="span8">
    BOX with blue background
</div>
<div class="span2">
    <div class="row">
        <div class="span12">BOX 5</div>
    </div>
    <div class="row">
        <div class="span12">BOX 7</div>
    </div>
    <div class="row">
        <div class="span12">BOX 8</div>
    </div>
</div>
</div>
<div class="row">
<div class="span6">BOX 9</div>
<div class="span6">BOX 10</div>
</div>


</div>
</body>

    CSS

    #contain {
    margin:auto;
    margin-top:120px;
    margin-left:600px;
}
.span6 {
    background:#06C;
    width:300px;
    height:120px;
    border:black thin solid;
    margin-left:-20px;
}
.span12 {
    background:#9C0;
    width:100px;
    height:120px;
    border:black thin solid;
    margin-left:-20px;
}
.span8 {
    background:#903;
    width:400px;
    height:364px;
    border:black thin solid;
    margin-left:-80px;
    margin-top:0px;

}

    Final tiles