Responsive four column div

Responsive four column div

Responsive four column div

Responsive four column div:- Hi Readers, Through this article you can make a responsible four div column layout in HTML using CSS. Four column will be responsive in all media screen. A user can use this layout to show services and other section of the website.

CSS For Responsive four column div

First of all create a css file with name style.css and copy below code to make responsive four column div

.maincontainer {

width: 100%; height: 75px; border: 3px solid yellow; padding:0px; }

.floating-box1 { display: inline-block; width: 24.8%; height: 75px; border: 1px solid black; padding:0px; float:left; }

.floating-box2 { display: inline-block; width: 24.8%; height: 75px; border: 1px solid black; padding:0px; float:left; }

.floating-box3 { display: inline-block; width: 24.8%; height: 75px; border: 1px solid black; padding:0px; float:left; }

.floating-box4 { display: inline-block; width: 24.8%; height: 75px; border: 1px solid black; padding:0px; float:left; }

@media only screen and (max-width:320px) {

.maincontainer { float:none; width:100%; height:auto; }

.floating-box1 { float:none; width:100%; }

.floating-box2 { float:none; width:100%; }

.floating-box3 { float:none; width:100%; }

.floating-box4 { float:none; width:100%;

}

Create HTML Page

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
 <!---main container--->
 <div class="maincontainer">
 
 <!----container 1---->
 
 <div class="floating-box1">
 
 
 <p>Hi Readers, Through this article you can make a responsible four div column layout in HTML using CSS. Four column will be responsive in all media screen. A user can use this layout to show services and other section of the website.</p>
 
 </div>
 
 
 
 <!----container2---->
 
 <div class="floating-box2">
 
 
 <p>Hi Readers, Through this article you can make a responsible four div column layout in HTML using CSS. Four column will be responsive in all media screen. A user can use this layout to show services and other section of the website.</p>
 
 </div>
 
 <!----container3---->
 
 <div class="floating-box3">
 
 <p>Hi Readers, Through this article you can make a responsible four div column layout in HTML using CSS. Four column will be responsive in all media screen. A user can use this layout to show services and other section of the website.</p>
 
 </div>
 
 
 <!----container4---->
 
 <div class="floating-box4">
 
 <p>Hi Readers, Through this article you can make a responsible four div column layout in HTML using CSS. Four column will be responsive in all media screen. A user can use this layout to show services and other section of the website.</p>
 
 </div>
 
 
 
 
 
 </div>
</body>
<html>

Output

onebox  twobox threebox fourbox

Here we ends session .

Leave a Comment