CODEWITHSUNDEEP
htmltwitter-bootstrap
James
James

Reputation: 1945

arrange side by side div

I want to have following layout of div

enter image description here

How can i achieve this? I tried below code

<div class="container">
<div class="row">
    <div class=" col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Elgen i baksetet">Test block1</a></h3>
                <div class="text"> <em><a href="#">AAAA</a></em>    
                    <p>Test paragraph 1</p>
                </div>
            </div>
        </div>
    </div>
    <div class=" col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Leasing – Et trekantforhold">Test block 2</a></h3>
                <div class="text"> <em><a href="#">BBBB</a></em>    
                    <p>New paragraph</p>
                </div>
            </div>
        </div>
    </div>
    <div class="  col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Leasingforløpet">New title</a></h3>
                <div class="text"> <em><a href="http://minleasing.no/category/leasing/">Title block 3</a></em>  
                    <p>Paragraph</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class=" col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Elgen i baksetet">Title3</a></h3>
                <div class="text"> <em><a href="#">Title block 4</a></em>

                    <p>Paragrpah start</p>
                </div>
            </div>
        </div>
    </div>
    <div class=" col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Leasing – Et trekantforhold">FFFFFFFFFFF</a></h3>
                <div class="text"> <em><a href="#">GGGGGGGGG</a></em>

                    <p>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</p>
                </div>
            </div>
        </div>
    </div>
    <div class="  col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Leasingforløpet">Gdddfdf</a></h3>
                <div class="text"> <em><a href="http://minleasing.no/category/leasing/">aaagr</a></em>

                    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="sidediv" class="row" style="float:left">
     This is my side DIV
</div>

But it comes down and not on side. I have defined div called sidediv which i want on side. Remember that it should be responsive hence want to use bootstrap.

here is Fiddle

Upvotes: 0

Views: 75

Answers (2)

Max Novich
Max Novich

Reputation: 1169

You should wrap it all in one more row and arrange side by side with col-md-

Like this

<div class="container">
    <div class="row">
        <div class=" col-md-8 " >
         -YOUR SMALL BLOCK ROWS
        </div>
        <div class="col-md-4">This is my side DIV</div>
    </div>
</div>

Here is an example fiddle

Note: Arranges side by side only on big sized screens because col-md is used. If you want it to be arranged side by side on small screens use col-sm or col-xs accordingly.

UPD1:

refering to our dialog in comments the updated css part

css

.tip {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    position: relative;
    z-index: 1;
    height:150px;
}
.tip .text p
{
    overflow:hidden;
    max-height:60px;

}

And an updated fiddle

Upvotes: 1

Srimant Mishra
Srimant Mishra

Reputation: 83

The image that you provided is replicated in the following fiddle. I made an assumption that since you haven't provided a size for your boxes, the smaller ones can be contained in xs-2 wrapper and the larger one occupies a xs-4 wrapper. However, you can alter it as per your requirements later on. Hope this helps :)

Fiddle link -
https://jsfiddle.net/pk1pr96n/106/

Code for the HTML is basically 

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-4">
         <div class="col-xs-6">
             <img src="http://www.myitchydog.co.uk/user/small-dog-playing.jpg" width="100%">
         </div>
         <div class="col-xs-6">
             <img src="http://www.myitchydog.co.uk/user/small-dog-playing.jpg" width="100%">
         </div>
         <div class="col-xs-6">
             <img src="http://www.myitchydog.co.uk/user/small-dog-playing.jpg" width="100%">
         </div>
         <div class="col-xs-6">
             <img src="http://www.myitchydog.co.uk/user/small-dog-playing.jpg" width="100%">
         </div>
     </div>
   <div class="col-xs-4">
        <img src="http://payload47.cargocollective.com/1/2/66131/3250877/unicornmirror9x12etsy_860.jpg" width="100%">
   </div>
 </div>

Upvotes: 0

Related Questions