What's wrong with this page?

108 100+

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

  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <   title>TLJ_Produits_Non_Alimentaires</title>
 
    <style type="text/css" media="all">

    /*-------------------------

    CSS reset

    ----------------------------*/

    html{margin:0px;padding:0px;width:1020px;height:auto;}
 
    .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}
 
    /* Border*/    

    .top{width:977px;height:21px;background:url(images/top.png) no-repeat;}
 
    .content{width:977px;height:auto;background:url(images/bg.png) repeat-y;}
 
    .bottom{width:977px;height:21px;background:url(images/bottom.png) no-repeat;}
 
    /*-------------------------

    CSS for header

    --------------------------*/
 
    .header{width:100%;height:auto;}
 
    /*-------------------------

    CSS for menu

    --------------------------*/
 
    .menubar{margin-left:10px;width:100%;clear:both;height:68px}
 
    .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;}

    .text{font-weight:bold;font-size:11px;text-transform:uppercase;line-height:1;margin-top:40px;text-decoration:none;}
 
    #body{width:100%;border:#099 thin groove;}
 
        #body p{margin-left:200px;float:left;clear:both;}
 
        p.text{color:#060;border:#060 thick groove;padding-left:100px;margin-top:00px;width:600px;margin-right:100px;}

    </style>

    </head>
 
     <body>
 
    <div class="wrapper purple">
 
                    <div class="top"> </div>
 
                       <div class="content">

                                <div class="header">
 
                                            <ul class="menubar white" >
 
                                                        <li class="menu">

                                                                        <div id="redbar">lundi</div>

                                                                       <a href="#" class="text purple">Pourquoi <br />tous les jours</a>

                                                        </li>
 
                                                        <li class="menu">

                                                                        <div id="redbar">mardi</div>

                                                                        <a href="#" class="text purple">produits <br />alimentaires</a>

                                                        </li>
 
                                                        <li class="menu">

                                                                        <div id="redbar">mercredi</div>

                                                                        <a href="#" class="text purple">produits<br />non-alimentaires</a>

                                                        </li>
 
                                                        <li class="menu">

                                                                        <div id="redbar">jeudi</div>

                                                                        <a href="#" class="text purple">tout<br />comprendre</a>

                                                        </li>
 
                                                        <li class="menu">

                                                                        <div id="redbar">vendredi</div>

                                                                        <a href="#" class="text purple">trouvez nos<br />produits</a>

                                                        </li>
 
                                                        <li class="menu">

                                                                        <div id="redbar">samedi</div>

                                                                        <a href="#" class="text purple">contactez-nous</a>

                                                        </li>
 
                                                        <li class="menu">

                                                                        <div id="bluebar">dimanche</div>

                                                                        <a href="#" class="text purple">j'aime</a>

                                                        </li>

                                            </ul>
 
                                </div>
 
                                <div id="body">
 
                                            <p class="text purple">retrouvez notre gamme de produits non alientaires. bientot plus de 300 references du quotidien.</p>
 
                                </div>
 
                    </div>
 
                    <div class="bottom"></div> 

    </div>
 
</body>

</html>

Here's the screenshot
http://jsbin.com/apizu4

Jun 5 '11 #1

Subscribe Post Reply

✓ 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.

1267

drhowarddrfine

7,435

Expert 4TB

Jun 6 '11 #2

Similar topics

what's wrong??!?!?!

by: tin | last post by:

Javascript

Table Layout and What's Wrong With it

by: Neal | last post by:

Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.

HTML / CSS

what's wrong with ajax?

by: G Matthew J | last post by:

interesting "signal vs. noise" blog entry: http://37signals.com/svn/archives2/whats_wrong_with_ajax.php

Javascript

What's Wrong with My Frame Set

by: Nuit Blanche | last post by:

Hi, I'd deeply appreciate if anyone can come out and rescue. It appears to be a simply problem. But I just can't make it work. Suppose I set up a frame document like the following (see...

HTML / CSS

what's wrong with <marquee>

by: charlie fortune | last post by:

I'm quite new to HTML, and have seen <marquee> get bad press here. What's wrong with using it. I wanted to have the contents of a .txt file scrolling for news items, can I do this with marquee, or...