I want to have following layout of div
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
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
col-md
is used. If you want it to be arranged side by side on small screens use col-sm
or col-xs
accordingly. refering to our dialog in comments the updated css part
.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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.