In our project, we currently have a design with 4 div elements arranged in two rows and two columns.
However, the client has requested that we allow for multiple div elements within a container that spans 100% width. The inner divs should adjust to fit side by side within this width, breaking down into a new row if necessary.
<div class="container">
<div class="block1"></div>
<div class="block2''></div>
<div class="block3"></div>
<div class="block4"></div>
</div>
.container {
width: 400px;
position: relative;
}
.block1 {
width: 198px;
height: 198px;
background: #FF0;
border: 1px solid red;
}
.block2 {
position: absolute;
left: 200px;
top: 0;
width: 198px;
height: 198px;
background: #FF0;
border: 1px solid red;
}
.block3 {
width: 198px;
height: 198px;
background: #FF0;
border: 1px solid red;
}
.block4 {
position: absolute;
left: 200px;
top: 200px;
width: 198px;
height: 198px;
background: #FF0;
border: 1px solid red;
}
This current setup can be viewed here: http://jsfiddle.net/NE3rZ/
I am seeking suggestions on how to modify this design to make it responsive.