Saturday, 13 September 2014

How do I keep two divs that are side by side the same height

Step 1 Css

    <style type="text/css">

     html{ height:100%;}

     body{ position:absolute; width:100%; height:100%; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#333;}

     .wp{ width:1000px; margin:0 auto; height:100%;}

     .left_part{ background:#eee; color:#333; text-align:center; height:100%; float:left; width:300px;}

     .right_part{ background:#ccc; color:#333; text-align:center; height:100%; float:left; width:700px;}

    </style>


Step 2 Html

<body>
    <div class="wp">
       <div class="left_part"> Left Div <br/> Padding top and bottom not allowd </div>
       <div class="right_part"> Right Div <br/> Padding top and bottom not allowd  </div>
    </div>
 </body>