3 floating divs with center dynamic width - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Width

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

Description

3 floating divs with center dynamic width

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;padding:0 60px}
#right{min-height:70px;width:60px;float:right;}

      </style> 
   </head> 
   <body> 
      <div id="container"> 
         <div id="left">
             text Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         </div> 
         <div id="right">
             text Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         </div> 
         <div id="middle">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem. 
         </div> 
      </div>  
   </body><!--from  w w  w .  j a  v a 2  s  . c o m-->
</html>

Related Tutorials