Place two div to container with one floating left and one floating right - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Float

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

Description

Place two div to container with one floating left and one floating right

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">
#Main<!-- www  .  j a  v a 2  s .  c o m-->
 {
   background-color:Chartreuse;
   padding:16px 21px 16px 21px;
   margin:0px 100px 11px 100px;
   border-radius:5px 5px 5px 5px;
   overflow:auto
}

.SearchDivs
 {
   display:inline;
   background-color:yellow;
   position:relative;
}

#SearchLeftPanel
 {
   clear:both;
   float:left;
   width:26%;
   height:100px;
}

#SearchRightPanel
 {
   float:right;
   width:68%;
   min-height:100px;
   height:auto
}
</style> 
 </head> 
 <body> 
  <div id="Main"> 
   <span id="SearchLeftPanel" class="SearchDivs"> leftleftleftleft leftleftleftleft leftleftleftleft leftleftleftleft leftleftleftleft leftleftleftleft leftleftleftleft leftleftleftleft leftleftleftleft </span> 
   <span id="SearchRightPanel" class="SearchDivs"> RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRRightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRRightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRRightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight RightRightRightRightRightRight </span> 
  </div>  
 </body>
</html>

Related Tutorials