Floating div inheriting parent's width - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div

Description

Floating div inheriting parent's width

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">
.container {<!-- ww w . ja v  a 2 s.c  o  m-->
   width:961px;
   margin:0 auto
}

.margins {
   margin-left:17px;
   margin-right:17px
}

.helpbox2 {
   position:relative;
   top:0;
   left:0;
   width:397px;
   float:right;
   padding-right:13px;
   padding-left:13px;
   padding-bottom:11px;
   border-bottom:2px solid Chartreuse;
   border-left:3px solid yellow;
   border-top:3px solid blue;
   border-right:2px solid pink;
   background:OrangeRed;
   margin-left:6px
}

.includebox {
   position:relative;
   left:0px;
   right:0px;
   width:100px;
   float:left;
   margin:0px auto;
}

.excludebox {
   position:relative;
   left:0px;
   right:0px;
   vertical-align:top;
   width:100px;
   float:right;
   margin:0px
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="margins"> 
    <div class="helpbox1"> 
     <h2>Lorem ipsum dol</h2> 
     <p></p> 
     <p> </p> 
     <p>Lorem ips</p> 
    </div> 
    <div class="helpbox2"> 
     <h2>Lorem ipsum dolor sit amet</h2> 
     <p></p> 
     <div class="includebox">
       Lorem ipsum do 
      <ul> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 
     <div class="excludebox">
       Lorem ipsum do 
      <ul> 
       <li>Lorem ipsum dol</li> 
       <li>Lorem ipsum dolor sit </li> 
       <li>Lorem ipsum dolor sit </li> 
       <li></li> 
       <li>Lorem ipsum do</li> 
       <li></li> 
      </ul> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials