Align two div inside parent container left and right - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Parent Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Parent Container

Description

Align two div inside parent container left and right

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Floats and Mark-up order</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#content {<!--   w  w w . j  a v a  2  s .  c  o  m-->
   width:1001px;
   margin-bottom:3.1em;
   overflow:auto;
}

.ex1 #sidebar {
   width:201px;
   float:left;
   height:100px;
   background-color:Chartreuse;
}

.ex1 #main {
   width:801px;
   height:100px;
   float:left;
   background-color:yellow;
}

.ex2 #sidebar {
   width:201px;
   float:left;
   height:100px;
   background-color:blue;
}

.ex2 #main {
   width:801px;
   height:100px;
   margin-left:201px;
   background-color:pink;
}

.ex3 #sidebar {
   width:201px;
   float:right;
   height:100px;
   background-color:WhiteSmoke;
}

.ex3 #main {
   width:801px;
   float:right;
   height:100px;
   background-color:OrangeRed;
}
</style> 
 </head> 
 <body> 
  <h3>div.main comes first in mark-up order.</h3> 
  <div id="content" class="ex1"> 
   <div id="main"></div> 
   <div id="sidebar"></div> 
  </div> 
  <h3>div.main comes second in mark-up order and is not floated.</h3> 
  <div id="content" class="ex2"> 
   <div id="sidebar"></div> 
   <div id="main"></div> 
  </div> 
  <h3>div.main comes first in mark-up order but appears 2nd.</h3> 
  <div id="content" class="ex3"> 
   <div id="main"></div> 
   <div id="sidebar"></div> 
  </div>  
 </body>
</html>

Related Tutorials