E Online Support - Free Software Download
how to create responsive div
Responsive div
Naveen
Answer
1

Responsive div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>responsive multiple div</title>
<style>

#div1{width:25%; float:left; background-color:#8eb238; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div2{width:25%; float:left; background-color:#ba0a55; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div3{width:25%; float:left; background-color:#2e98ca; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div4{width:25%; float:left; background-color:#5c7d0f; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#div1{width:100%; background-color:#8eb238; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div2{width:100%; background-color:#ba0a55; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div3{width:100%; background-color:#2e98ca; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div4{width:100%; background-color:#5c7d0f; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
}


@media only screen and (max-width: 767px) {
#div1{width:100%; background-color:#8eb238; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div2{width:100%; background-color:#ba0a55; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div3{width:100%; background-color:#2e98ca; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div4{width:100%; background-color:#5c7d0f; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
}
 

@media only screen and (min-width: 480px) and (max-width: 767px) {
#div1{width:100%; background-color:#8eb238; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div2{width:100%; background-color:#ba0a55; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div3{width:100%; background-color:#2e98ca; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
#div4{width:100%; background-color:#5c7d0f; padding:30px 0 30px 0; text-align:center; color:#ffffff;}
}

</style>
</head>

<body>

<div style="width:80%; margin:auto; overflow:auto; overflow:hidden;">
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div>
    <div id="div4">Div 4</div>
</div>

</body>
</html>
Question*:
Description*:
Script:
Related To:
 PHP    HTML    CSS    JAVASCRIPT    JQUERY   
 AJAX    WINDOWS    GAMES    DRIVERS    MAC   
 LINUX    MOBILE    GADGETS   
Security Code:
9669
Enter Security Code:
 
Facebook   Linkedin   Skype   Twitter