Dividing the page and Viewing the division

Problem

I just want to view the divisions I have done on the page, but nothing is visible on the page. What is wrong with my code?

I just want that what I have divided should be shown on the page without content. I'm using chrome.

<!DOCTYPE html>
<html>
    <head>
    <style>
        .main {
            width: 100%;
            height: 100%;
            background: -webkit-linear-gradient(#029CC9, #005077); /* For Safari */
            background: -o-linear-gradient(#029CC9, #005077); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#029CC9, #005077); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#029CC9, #005077); /* Standard syntax (must be last) */
        }

        .main .header .icon {
            width: 90%;
            margin-left: 5%;
        }

        .main .header .menu {
            width: 90%;
            margin-left: 5%;
        }

        .main .content {
            background-color: lightgrey;
        }

    </style>
</head>
<body>

    <div class="main">
        <div class="header">
            <div class="icon"></div>
            <div class="menu"></div>
        </div>
        <div class="content"></div>
    </div>

</body>
</html>
Problem courtesy of: sms247

Solution

If you add &nbsp; within the div elements to see the backgrounds you can see the colors without having any actual content in it.

<div id="main">
    <div class="header">
        <div class="icon">&nbsp;</div>
        <div class="menu">&nbsp;</div>
    </div>
    <div class="content">&nbsp;</div>
</div>
Solution courtesy of: Phlume

Discussion

If you want to see the div portion without adding text ,you have to mention particular height .

.main .header .icon {
     width: 90%;
     margin-left: 5%;
     height: 30px;
}
Discussion courtesy of: Manoj

Change the .main into an id.

Replace .main with #main respectively.

Discussion courtesy of: D. WONG

This will give you a basic border around the main div and color it green. You can do similar things for the others to show where each div is placed.

.main {
    border-style:solid;
    border-width:1px;
    height: 10px;
    background-color: green;
}
Discussion courtesy of: Blundering Philosopher

This recipe can be found in it's original form on Stack Over Flow.