Aligning Two DIVs, one big in the center - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Div Align

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Div Align

Description

Aligning Two DIVs, one big in the center

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">
body {<!--  ww  w.j a  v  a 2  s .  c o  m-->
   margin:0;
   outline:0 none;
   padding:0;
   vertical-align:baseline;
   text-align:center;
}

.clearfix:after {
   clear:both;
   content:".";
   display:block;
   height:0;
   visibility:hidden;
}

.clearfix {
   display:block;
}

.texture {
   margin:0 auto;
   width:983px;
   position:relative;
}

#sosyal-paylasim {
   background-color:Chartreuse;
   border-color:yellow;
   border-style:solid;
   border-width:3px 2px 2px;
   box-shadow:0 3px 4px blue;
   position:absolute;
   left:-81px;
   min-height:151px;
   overflow:hidden;
   top:201px;
   width:65px;
}

.container {
   background:pink;
   border-left:2px solid WhiteSmoke;
   border-right:2px solid OrangeRed;
   box-shadow:0 0 11px grey;
   height:801px;
   width:981px;
}
</style> 
 </head> 
 <body> 
  <div class="texture"> 
   <div id="sosyal-paylasim"> 
   </div> 
   <div class="container clearfix">
     CONTENT IS HERE 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials