By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,473 Members | 1,267 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,473 IT Pros & Developers. It's quick & easy.

What's wrong with this page?

100+
P: 108
The menus and the text at the bottom are in the div#body tag.. I've set a border of green for this.. The menus and the bottom text should have been within this green border but they are not..
What's wrong with the codes? Why don't they fit withing the border?
Expand|Select|Wrap|Line Numbers
  1.  
  2.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.     <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <   title>TLJ_Produits_Non_Alimentaires</title>
  7.  
  8.     <style type="text/css" media="all">
  9.     /*-------------------------
  10.     CSS reset
  11.     ----------------------------*/
  12.     html{margin:0px;padding:0px;width:1020px;height:auto;}
  13.  
  14.     .wrapper{background:url(images/bgbg.jpg) repeat-y;width:100%;min-height:100%;margin-top:0px;margin-left:auto;margin-right:auto;padding:0px;font-family:Georgia, "Times New Roman", Times, serif;line-height:1px}
  15.  
  16.     /* Border*/    
  17.     .top{width:977px;height:21px;background:url(images/top.png) no-repeat;}
  18.  
  19.     .content{width:977px;height:auto;background:url(images/bg.png) repeat-y;}
  20.  
  21.     .bottom{width:977px;height:21px;background:url(images/bottom.png) no-repeat;}
  22.  
  23.     /*-------------------------
  24.     CSS for header
  25.     --------------------------*/
  26.  
  27.  
  28.     .header{width:100%;height:auto;}
  29.  
  30.  
  31.     /*-------------------------
  32.     CSS for menu
  33.     --------------------------*/
  34.  
  35.     .menubar{margin-left:10px;width:100%;clear:both;height:68px}
  36.  
  37.     .menu{background:url(images/menu.png) no-repeat; width:127px;height:68px;list-style:none;float:left;margin-top:10px;padding-top:10px;clear:both;}
  38.     .text{font-weight:bold;font-size:11px;text-transform:uppercase;line-height:1;margin-top:40px;text-decoration:none;}
  39.  
  40.  
  41.     #body{width:100%;border:#099 thin groove;}
  42.  
  43.         #body p{margin-left:200px;float:left;clear:both;}
  44.  
  45.  
  46.         p.text{color:#060;border:#060 thick groove;padding-left:100px;margin-top:00px;width:600px;margin-right:100px;}
  47.     </style>
  48.     </head>
  49.  
  50.      <body>
  51.  
  52.     <div class="wrapper purple">
  53.  
  54.                     <div class="top"> </div>
  55.  
  56.                        <div class="content">
  57.                                 <div class="header">
  58.  
  59.  
  60.  
  61.                                             <ul class="menubar white" >
  62.  
  63.                                                         <li class="menu">
  64.                                                                         <div id="redbar">lundi</div>
  65.                                                                        <a href="#" class="text purple">Pourquoi <br />tous les jours</a>
  66.                                                         </li>
  67.  
  68.                                                         <li class="menu">
  69.                                                                         <div id="redbar">mardi</div>
  70.                                                                         <a href="#" class="text purple">produits <br />alimentaires</a>
  71.                                                         </li>
  72.  
  73.                                                         <li class="menu">
  74.                                                                         <div id="redbar">mercredi</div>
  75.                                                                         <a href="#" class="text purple">produits<br />non-alimentaires</a>
  76.                                                         </li>
  77.  
  78.                                                         <li class="menu">
  79.                                                                         <div id="redbar">jeudi</div>
  80.                                                                         <a href="#" class="text purple">tout<br />comprendre</a>
  81.                                                         </li>
  82.  
  83.                                                         <li class="menu">
  84.                                                                         <div id="redbar">vendredi</div>
  85.                                                                         <a href="#" class="text purple">trouvez nos<br />produits</a>
  86.                                                         </li>
  87.  
  88.                                                         <li class="menu">
  89.                                                                         <div id="redbar">samedi</div>
  90.                                                                         <a href="#" class="text purple">contactez-nous</a>
  91.                                                         </li>
  92.  
  93.                                                         <li class="menu">
  94.                                                                         <div id="bluebar">dimanche</div>
  95.                                                                         <a href="#" class="text purple">j'aime</a>
  96.                                                         </li>
  97.                                             </ul>
  98.  
  99.                                 </div>
  100.  
  101.  
  102.  
  103.                                 <div id="body">
  104.  
  105.                                             <p class="text purple">retrouvez notre gamme de produits non alientaires. bientot plus de 300 references du quotidien.</p>
  106.  
  107.  
  108.  
  109.  
  110.                                 </div>
  111.  
  112.  
  113.                     </div>
  114.  
  115.                     <div class="bottom"></div> 
  116.     </div>
  117.  
  118.  
  119.  
  120. </body>
  121. </html>
  122.  
  123.  
Here's the screenshot
http://jsbin.com/apizu4
Jun 5 '11 #1

✓ answered by drhowarddrfine

Elements are NEVER to expand to contain floated elements which are removed from the normal flow. To get parent elements to do such a thing, you need to either float them or add 'overflow:auto' to contain elements that overflow the boundaries.

Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
Elements are NEVER to expand to contain floated elements which are removed from the normal flow. To get parent elements to do such a thing, you need to either float them or add 'overflow:auto' to contain elements that overflow the boundaries.
Jun 6 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.