Home/ Questions/Q 7087333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:39:41+00:00

I have the following HTML code with CSS: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0

  • 0

I have the following HTML code with CSS:

<!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>
        <style type="text/css">
        div.scroll
        {
            background-color:#00FFFF;
            position:absolute;
            top:0%;
            left:0%;
            width:10%;
            height:100%;
        }

        div.hidden 
        {
            background-color:#00FF00;
            position:absolute;
            top:0%;
            left:50%;
            width:20%;
            height:100%;
        }

        div.menu
        {
            position:absolute;
            top:70%;
            left:20%;
            width:80%;
        }
    </style>
</head>

<body>
    <p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>

    <div class="menu">
        <div class="scroll">Scroll: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
        <div class="hidden">Hidden: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
    </div>
</body>

As you can see I want two of the divisions to have color – they don’t and I can’t figure out why. The file has an html extension and I have used both IE7 and FF 3.0.3 to test.

What perplexes me the most is that it is almost a verbatim copy of an example from W3C schools that does show color! Link to example: W3C example.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is height:100%; . It means that the element use all the height of its parent, in this case the <div class="menu">, which is 0px because all its content is positioned with absolute.

    You can either remove it if you want each div of have the size of its text, or set a height in pixel if you want to apply the same height to the both divs.

    • 0