Dividing the page and Viewing the division

Question

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>

Your divs are probably present, they just don't have any actual content in them. You need to add text or other visual elements to see anything — Blundering Philosopher, Dec 19 '13 at 05:29
You can look at the divs by right-clicking in the window and pressing `Inspect Element` - then searching for the divs you created. [since you're using Chrome] — Blundering Philosopher, Dec 19 '13 at 05:30
I've already done that, but my question is how can i view divisions without content? — sms247, Dec 19 '13 at 05:32

score 2 · Accepted Answer · answered Dec 19 '13 at 05:42

2

If you add   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>

answered Dec 19 '13 at 05:42

Phlume

3,075
2
19
38

can u tell me why it's not on whole page even if I have done width and height 100% – sms247 Dec 19 '13 at 05:45
2

Try to set the height with a px. i set it to 500px and it showed up quite large. Also, you may want to add a `background` color to the icon and menu tags as well since you can't see them at all. I used red `background:#900;` and green `background:#090;` to display them easilly on top of the blue – Phlume Dec 19 '13 at 05:46
1

As for the full height, see this post (http://stackoverflow.com/questions/12043830/div-stretch-100-page-height-regardless-of-content) – Phlume Dec 19 '13 at 05:51
This is very helpful, but why can't I do it using percentage? What my concept is that percentage feature is good as it will be flexible with all resolution. – sms247 Dec 19 '13 at 05:52
That link is again helpful :) – sms247 Dec 19 '13 at 05:54
1

you can use percentages... you just need to set up the page to accommodate it completely. simply add `html,body{height:100%}` and you should be all set with the full page background – Phlume Dec 19 '13 at 05:56

score 1 · Answer 2 · answered Dec 19 '13 at 05:41

1

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;
}

answered Dec 19 '13 at 05:41

Blundering Philosopher

6,245
2
43
59

What if i want it on whole page? how can i do it with percentage in width? – sms247 Dec 19 '13 at 05:43

score 0 · Answer 3 · answered Dec 19 '13 at 05:34

0

Change the .main into an id.

Replace .main with #main respectively.

answered Dec 19 '13 at 05:34

D. WONG

59
7

I tried it myself, the blue background showed up with a container inside. You try it first, then let me know again. – D. WONG Dec 19 '13 at 05:39

score 0 · Answer 4 · answered Dec 19 '13 at 06:16

0

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;
}

answered Dec 19 '13 at 06:16

Manoj

1,860
1
13
25

Dividing the page and Viewing the division

4 Answers4