JavaScript HTML & CSS: How to make divs responsive-Creating simple responsive design

It is now became necessary for every website to be responsive to different platforms like mobile, tablet and desktop. Creating fluid or responsive design is made easy CSS3 media queries.

In this post we will see how to create a simple responsive design using media query.

1. Lets create two div blocks in a simple html page

<!DOCTYPE html>
<html>
<style>

#container {
  width : 610px;
}

.holder {
  width : 300px;
  height : 300px;
  border : 1px solid red;
}

</style>
<body>
    <div id = "container"> 
    <div class = "holder">
     MY CONTENT IN DIV 1
    </div>
    <div class = "holder">
     MY CONTENT IN DIV 2
    </div>
   </div>
</body>
</html>

If you execute the above code you will see something like below.

Fig.1 : Shows general div blocks with defined width and height of 300px

2. We need these div blocks to be side by side intially. So we will add some css properties to place them in one row.

Replace the holder class style with the below one.

.holder {
width : 300px;
height : 300px;
border : 1px solid red;
display : inline-table;
float : left;
}

Now our divs should look like this

Fig.2 : Shows div blocks aligned in one row(aligned side by side)

3. Now, the two divs total width is 600px(i.e 300px + 300px). Lets say any device/browser width which is less than that, we want them to be in one column

So, now using media query in our css we will change the css properties of the divs when the browser width is less than 600px.

a) Change container width to 100%

b) Change holder width to 100%

@media (max-width: 600px) 
{
 #container {
     width : 100%;
  }
 .holder {
     width : 100%;
  }
}

Thats it, if you include media query section in your style sheet, the result div blocks willl look like below for devices/browsers that are less than 600px width.