Home  • Programming • CSS

Two Column Responsive Fluid Layout Basic

doctype-html-head-meta

Method 1 : Using calc() function

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Two Column Responsive Layout</title>
<style>
.box{min-height:100px; background-color:#CCC; float:left;padding:10px;box-sizing:border-box}
.leftBox{width:30%;margin-right:10px;}
.rightBox{width:calc(70% - 10px);}
#wrapper{ width:100%; margin:0px auto; background-color:#EEE;padding:10px; box-sizing:border-box;}

@media screen and (max-width: 480px) {
	.box{clear:left;width:100% !important}
	.rightBox{margin-top:10px;}
}
</style>
</head>
<body>
<div id="wrapper">
  <div class="box leftBox">Box 1</div>
  <div class="box rightBox">Box 2</div>
  <br style="clear:both" />
</div>
</body>
</html>

Method 2 : Margin less

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Two Column Responsive Layout</title>
<style>
body{margin:0px; width:100%;}
.box{float:left;padding:5px; box-sizing:border-box;}
.leftBox{width:30%;}
.rightBox{width:70%;}
#wrapper{ width:100%; margin:0px auto; background-color:#EEE;padding:5px; box-sizing:border-box}
.context{background-color:#CCC; padding:5px; height:100px; }
@media screen and (max-width: 480px) {
	.box{clear:left;width:100% !important}	
	.leftBox{padding-top:5px;}	
}
</style>
</head>
<body>
<div id="wrapper">
  <div class="box leftBox">
    <div class="context">Box 1</div>
  </div>
  <div class="box rightBox">
    <div class="context">Box 2</div>
  </div>
  <br style="clear:both" />
</div>
</body>
</html>
  
 /32

Comments 0


Share

About Author
Mohammad Towhidul Islam
Copyright © 2024. Powered by Intellect Software Ltd