CSS - Perfect 2 Column Bug Free Responsive Layout CSS Code

CSS - The Perfect 2 Column Bug Free Responsive Layout CSS Code, Fully Responsive to Any Browser Width Without Undesired Gaps or Unexplainable Padding or Margins

The following genius CSS code for the perfect, bug free, 2 column layout was created by Matthew James Taylor. As you resize the browser to any size you see this 2 column css code is 100% responsive and mobile friendly.

The background colors and red border is just for demonstration purposes so you can see how this 2 column layout css code works.

The 2 column response layout css code.

.rowouter{ border:1px solid red; /* <--- FOR DEMONSTRATION */ clear:both; float:left; margin:10px auto; overflow:hidden; position:relative; white-space:nowrap; width:100%; } .rowouterleft, .rowouterright{ border:1px solid green; /* <--- FOR DEMONSTRATION */ display:inline-block; overflow:hidden; vertical-align:top; white-space:normal; width:100%; } .rowouterleft{ background:yellow; /* <--- FOR DEMONSTRATION */ margin-left:-50%; } .rowouterright{ background:orange; /* <--- FOR DEMONSTRATION */ margin-right:-50%; } .rowinnerleft, .rowinnerright{ padding:5px; /* <--- CHANGE TO SUIT YOUR NEEDS */ } .rowinnerleft{ float:right; width:48%; } .rowinnerright{ float:left; width:49%; }

The 2 column response layout html code.

<div class="rowouter"> <div class="rowouterleft"> <div class="rowinnerleft"> <p>sdf sdsdf sdf sdsdf sdf sdsdf sdf sdsdf sdf sdsdfsdf sdsdf sdf sdsdf</p> <p>sdf sdsdf</p> <p>sdf sdsdf</p> <p> sdsdf</p> </div> <!-- .rowinnerleft --> </div> <!-- .rowouterleft --> <div class="rowouterright"> <div class="rowinnerright"> <p>sdf sdsdf</p> <p> sdsdf</p> </div> <!-- .rowinnerright --> </div> <!-- .rowouterright --> </div> <!-- .rowouter --> <div class="rowouter"> <div class="rowouterleft"> <div class="rowinnerleft"> <p>sdf sdsdf sdf sdsdf sdf sdsdf sdf sdsdf sdf sdsdfsdf sdsdf sdf sdsdf</p> <p>sdf sdsdf</p> <p>sdf sdsdf</p> <p> sdsdf</p> </div> <!-- .rowinnerleft --> </div> <!-- .rowouterleft --> <div class="rowouterright" style=""> <div class="rowinnerright"> <p>sdf sdsdf</p> <p> sdsdf</p> </div> <!-- .rowinnerright --> </div> <!-- .rowouterright --> </div> <!-- .rowouter -->