How to create grid fluid responsive consist of three boxes? - html

Question

I am tired for create responsive grid in css & html,the following image may be easy to figure out. many thanks for help.
Here is my example image:

Answer 1

You might use an excellent framework for it : bootstrap !
They have an excellent grid system :)
You might find everything you need here :
http://getbootstrap.com/css/#grid
Hope that should help :)

Answer 2

Here is my css & Html but I can't write prefect css I am so beginner with css & html.
<div class="wrapper">
<div class="Box1">
Box1
</div>
<div class="container_right">
<div class="Box2">Box2</div>
<div class="Box3">Box 3</div>
<div class="Box4"> Box4</div>
</div>
</div>
CSS:
.wrapper {
overflow:hidden;
width: 1060px;
margin:0 auto;
padding:5px;
}
.wrapper Box1 {
float:left;
margin-right:10px;
width:520px;
padding:5px;
background-color:#808080;
}
.wrapper .container_right {
width:520px;
float:right;
}
.container_right .box2 {
width:100%;
height:200px;
margin:5px;
padding:5px;
background-color:#808080;
}
.container_right .box3 {
width:50%;
height:200px;
padding:5px;
background-color:#808080;
}
.container_right .box4 {
width:50%;
height:200px;
padding:5px;
background-color:#808080;
}

Answer 3

1) Here's how Stack Overflow works: learn, try, fail, then come ask for help here. So you need to show some effort yourself.
2) Anyway, there must be a million ways to build such a layout. Here is a sample with Bootstrap, using images as content. Includes some unfortunate stabbing of the framework, to get rid of the gutter between things.
Fiddle:
https://jsfiddle.net/csy1wypc/1/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="single">
<div class="img-holder">
<img src="http://lorempixel.com/g/900/400/">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="double">
<div class="img-holder">
<img src="http://lorempixel.com/g/800/400/">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="single">
<div class="img-holder">
<img src="http://lorempixel.com/g/600/400/">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="single">
<div class="img-holder">
<img src="http://lorempixel.com/g/700/400/">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.col-md-6,
.col-md-12,
.col-sm-6,
.col-sm-12,
.col-xs-6,
.col-xs-12 {
padding: 0;
}
.row {
margin: 0;
}
.single,
.double {
position: relative;
width: 100%;
overflow: hidden;
}
.single {
padding-bottom: 100%;
}
.double {
padding-bottom: 50%;
}
.single .img-holder,
.double .img-holder {
position: absolute;
width: 100%;
text-align: center;
}
.single img,
.double img {
position: relative;
max-height: 100%;
left: 100%;
margin-left: -200%;
}