Aligning Nested DIVs, two columns, left and right - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. 2 Column

Description

Aligning Nested DIVs, two columns, left and right

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head></head> 
 <body translate="no"> 
  <div id="part_all" style="height:500px; background-color:gray"> 
   <div id="part_left" style="width:45%; height: 300px; margin:2%; background-color:orange; float:left"> 
    <div id="part_Bargauge" style="margin:2%; color:white; float: left; height: 80%; width: 70%; background-color:green;">
      part_Bargauge <!--from   w  w w. ja  va2s. c om-->
    </div> 
    <div id="part_Listbox" style="margin:2%;color:white; float:left; height:80%; width: 20%; background-color:purple;">
      part_Listbox 
    </div> 
   </div> 
   <div id="part_Right" style="color:white; float: left; width: 45%; min-height:300px; background-color: blue; margin: 2%;">
     part_Right 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials