CODEWITHSUNDEEP
htmlcss
BigMac66
BigMac66

Reputation: 1538

DIV not showing with specified background color

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.

Upvotes: 0

Views: 1481

Answers (2)

Baldrick
Baldrick

Reputation: 24340

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.

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

Remove height: 100%; from your div.scroll and div.hidden CSS classes.

Upvotes: 1

Related Questions