I used a lot of float and clear but in this case I faced with a strange problem.
this is my html code:
.tablerow{
border:1px solid blue;
padding:0px;}
.tablerow .tablerowcolumn{
height:30px;
width:15%;
margin:0px;
float:right;
border:1px solid #565656;
background-color:#fff;
}
<div class="tablerow">
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div style="clear:both"></div>
</div>
<div class="tablerow">
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div style="clear:both"></div>
</div>
but the result is different from what expected:
You code works, but not exactly as expected, since .tablerows haven't height property, and they are trying to be as little as possible.
So if you add a height (eg. 100px), you'll get the result:
.tablerow{
border:1px solid blue;
padding:0px;
height:100px;
}
.tablerow .tablerowcolumn{
height:30px;
width:15%;
margin:0px;
float:right;
border:1px solid #565656;
background-color:#fff;
}
<div class="tablerow">
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div style="clear:both"></div>
</div>
<div class="tablerow">
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div style="clear:both"></div>
</div>
Related
I'm working in a SaaS program that allows you to enter a custom CSS file with some html as well. That means I can't remove anything from their code, just override it. I've found an element.style in their code but I can't tell how to override it because I can't find a div or class that it goes with. The line in question is <div style="margin:5px; width:140px; height:20px; float:right;" align="right">. I want to change width: 140px to 200px
<div class="boxcontent">
<div style="width:100%; height:42px;">
<div style="margin:5px; width:400px; height:30px; float:left;">
<div class="dashboard_dropdown_btn" id="metric_drop_0">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_0">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_1" style=
"display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_1">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_2" style=
"display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_2">Ideas</span>
</div>
</div>
<div class="dashboard_edit_div">
Edit
</div>
</div>
<div style="margin:5px; width:140px; height:20px; float:right;" align="right">
<div style="float:left; margin-right:5px; line-height:20px;">
View by:
</div>
<div onclick="selectView('d');" class="select_icon" id="select_day" style=
"float:left;" rel="on" title="Day"></div>
<div onclick="selectView('w');" class="select_icon" id="select_week" style=
"float:left;" title="Week"></div>
<div onclick="selectView('m');" class="select_icon" id="select_month" style=
"float:left;" title="Month"></div>
</div>
.boxcontent>div>div:nth-child(2) {
background-color: red;
width: 200px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxcontent">
<div style="width:100%; height:42px;">
<div style="margin:5px; width:400px; height:30px; float:left;">
<div class="dashboard_dropdown_btn" id="metric_drop_0">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_0">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_1" style="display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_1">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_2" style="display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_2">Ideas</span>
</div>
</div>
<div class="dashboard_edit_div">
Edit
</div>
</div>
<div style="margin:5px; width:140px; height:20px; float:right;" align="right">
<div style="float:left; margin-right:5px; line-height:20px;">
View by:
</div>
<div onclick="selectView('d');" class="select_icon" id="select_day" style="float:left;" rel="on" title="Day"></div>
<div onclick="selectView('w');" class="select_icon" id="select_week" style="float:left;" title="Week"></div>
<div onclick="selectView('m');" class="select_icon" id="select_month" style="float:left;" title="Month"></div>
</div>
</div>
</div>
I have div to look like table, this is my code:
.cell {
border: 1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
Now all the the columns are in different width, and I don't know why. I want that div get different width but synchronize.
using display:table like this
.tableLike{width:100%;display:table;}
.cell{border:1px solid red;display:table-cell;}
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 15%;}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
Add the correct display styles:
.cell {
border: 1px solid red;
display: table-cell;
}
.tableLike {
padding-bottom: 30px;
display: table;
}
.rowLike {
display: table-row;
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 33%;}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
I will do like this.
You can try, but it may not be the best answer.
.cell {
border-right:1px solid red;
border-bottom:1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.rowLike:nth-child(1) .cell:nth-child(2),
.rowLike:nth-child(1) .cell:nth-child(3){
border-top:1px solid red;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.icon-close{
border-left:1px solid red;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
i am trying to build a css framework for my personal use.
i have experienced this problem before on other projects but managed to fix it by altering the code. i have no idea why this happens
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
*{
box-sizing:border-box;
}
.row{
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
}
.col-sm-1,.col-md-1,.col-lg-1{
margin:0;
padding:0;
display:inline-block;
width:4.16667%;
border:1px solid black;
}
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
</div>
as you can see in the code snippet there is blank space when you run therefore resulting in less divs in the row. i tried inspecting it with chrome but the blank space shows as part of the body. i have literally no margins and no paddings at all
The problem is the white space between inline-blocks.
<div style="display:inline-block">A</div> <!-- There is a white-space here --><div style="display:inline-block">B</div>
You can avoid this by packing the divs together seamlessly (although ugly):
<div style="display:inline-block"></div
><div style="display:inline-block></div>
This eliminates the spaces between the tags which actually do get parsed!
Another way to avoid this is instead of
display:inline-block
using
float:left
which, however, requires a
clear:both
on the container, to prevent layout issues.
Changed to display:block and float:left; and works fine.
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
*{
box-sizing:border-box;
}
.row{
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
}
.col-sm-1,.col-md-1,.col-lg-1{
margin:0;
padding:0;
display:block;
float:left;
width:4.16667%;
border:1px solid black;
}
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
</div>
Although I have ask the same question two times but I'm not getting any proper solution for this.I dont know what is wrong with my code. so here I'm posting the whole code (I know its against the community standard but seriously I want a solution for my problem and I request you guys to have a look at this and please keep patience) I'm new to web development field, please help me.
My problem is that I need to apply box shadow to #main-content-area to its top side and as well as left and right side (50% from top side)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>
</body>
</html>
It won't show. Because box shadow to the div element was empty. I just add some text and margin-top
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
margin-top:20px;
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 10px 0px 10px rgba(150, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow">Shadow content</div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>
#main-content-area{
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
or you can go for it also
#main-content-area
{
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 15px 1px 5px #888888;
}
Explain box shadow for every thing here in my example the values are:
Horizontal Length:1px
Vertical Length:4px
Blur Radius:16px
Spread Radius:15px
The CSS:
box-shadow: 1px 4px 16px 15px rgba(82,43,136,1);
If you want to apply the box-shadow property to your #main-content-area div, you have to basically... add this property into #main-content-area div in your css file.
It will apply the shadow effect on left, right and bottom side:
box-shadow: 0 10px 10px 10px rgba(0, 0, 230, 0.5);
If you want the shadow to appear only on bottom and right side, use:
box-shadow: 10px 10px 10px rgba(0, 0, 230, 0.5);
Codepen: http://codepen.io/anon/pen/VmoNWJ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
box-shadow : -10px 0px 10px 0px rgba(0,0,0,0.5),10px 0px 10px 0px rgba(0,0,0,0.5),0px -10px 10px 0px rgba(0,0,0,0.5);
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to create four columns in a row using bootstrap. There should be some spacing between columns. please check the image. can someone tell me how to create a page like seen in the image?
Anoted in the comments below, your desired box width of 344px, 4*344=1376, this doesnt fit into the bootstrap grid system for smaller sizes, so will wrap, as such you will need to use e.g:
Demo Fiddle
HTML
<div class='wrapper'>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
.wrapper {
white-space:nowrap;
text-align:center;
}
.wrapper div {
display:inline-block;
background:lightblue;
margin:5px;
height:200px;
width:344px;
}
Otherwise the bootstrap way:
Demo Field
Given the HTML:
<div class="container">
<div class="row">
<div class="col-xs-3">
<div></div>
</div>
<div class="col-xs-3">
<div></div>
</div>
<div class="col-xs-3">
<div></div>
</div>
<div class="col-xs-3">
<div></div>
</div>
</div>
</div>
You can use the CSS (should be tidied)
[class*=col] div {
background:lightblue;
margin:5px;
height:200px;
}
DEMO UPDATED bootply: http://www.bootply.com/T8BDlFLpRD
You can use this code:
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
</div>
</div>
CSS
body
{
background:orange;
}
.col-md-3{
height:200px;
padding-top:25px;
}
Using bootstrap:
<div class="row">
<div class="col-xs-3">block 1</div>
<div class="col-xs-3">block 2</div>
<div class="col-xs-3">block 3</div>
<div class="col-xs-3">block 4</div>
</div>
Inside each block, you can put your column content