Float left and right and div stack - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Float

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

Description

Float left and right and div stack

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

* { margin:0px; padding:0px; }
div.header{ width:1000px; }
div.w604 { float:left; width:604px; height:85px; background-color:#65FF00; }
div.w29 { float:right; width:29px; height:85px; background-color:#000000 }
div.w182 { float:right; width:182px; height:85px; }
div.h32 { width:182px; height:32px; background-color:#FFD800; }
div.h22 { width:182px; height:22px; background-color:#FF4E00; }
div.h31 { width:182px; height:31px; background-color:#6601FF; }


      </style> 
 </head> <!--  w  w  w. ja v  a2s . co m-->
 <body> 
  <div class="header"> 
   <div class="w604"></div> 
   <div class="w182"> 
    <div class="h32"></div> 
    <div class="h22"></div> 
    <div class="h31"></div> 
   </div> 
   <div class="w29"></div> 
  </div>  
 </body>
</html>

Related Tutorials