I'm Not Getting a Box Here

HTML-CSS
1

I thought this code would get me a (500 X 500) blue box that is centered on the page. I get nothing - what am I missing?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A div in 5 Parts</title>
    <style>
        div {
            margin: auto;
            width: 500px;
            height:500px;
            background-color: rgb(19, 119, 207,);
        }
    </style>
</head>
<body>
    <div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="base"></div>
    </div>
</body>
</html>
2

when something doesn’t work as expected the first thing to check may be syntax errors - the comma at the end should not be there

I suggest this validator to use: The W3C Markup Validation Service

3

Take out that comma after 207.

4

Brilliant! Thanks for spotting that for me. I did look for syntax errors - it was the first thing that I thought of - but couldn’t see any. Originally there was an opacity factor of 0.4 in the background color, following the 207. I then decided to remove the opacity element but I didn’t know that in such an event, the comma had to be removed as well. So now I do! Thanks also for the Validator tip - I’ll be using it from hereon.

5

So now I can see the box but it’s not the square (500 X 500) that I have coded for.
The height takes up the entire length of the browser window. So what is the issue here ?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A div in 5 Parts</title>
    <style>
        div {
            margin: auto;
            width: 500px;
            height:500px;
            background-color: rgb(19, 119, 207);
        }
    </style>
</head>
<body>
    <div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="base"></div>
    </div>
</body>
</html>
6

You’ve got three divs each with a height of 500px. If you could make your browser view port taller than 1500px you’d see that it stops eventually :slight_smile:

7

I thought that the div in the CSS only applied to one div - the parent - since the other three div’s had three different class identifiers.

8

Your CSS is targeting all divs.

If you want the target the divs with classes, need to specify .top .bottom, and so on in your CSS rules. That will override the div style rule. If you want all three boxes to have the same size, you can give each of those divs the same class name and target them all at once in CSS. If you want them to have different sizes, then the way you have it, each one with a separate class, is fine. Or you can use id for that, too.

Hope that makes sense.

9

Oh, also, your divs are stacked on top of each other with no margin. If you put in a border: solid, you will see three divs.

10

Thanks - that does clarify things but I do have a remaining question. The way I have my code is - parent div contains 3 child divs. So now I know that my CSS targets all the divs which leaves me wondering does the parent div get a
(500 X 500) box of its own as well as the 3 child divs?

11

Yes. What I think is happening is your parent div has a width and height of 500px. Since the child divs are the same size, they are overflowing underneath the parent div.

If you give your child divs a single class name and use your same CSS, you’ll get three boxes stacked on top of eachother. The parent div’s height now stretches to fit the child divs.

I made a little codepen to demonstrate: Boxes

12

Thanks for your help with all this. Just to make certain I know what is going on here - you are telling me that we have the 3 child divs stacked atop each other and the parent div now has a height=1500 but is hiding behind the 3 child divs.which are in the foreground. Have I got that right?

13

An easy way to confirm what is happening is to put a temporary border around the parent div so you can see exactly how tall it is.

1 Like
14

thanks - will do and see what the real height of the parent div is

15

Hmm … … I tried adding a border to the parent div and got - nothing so I still can’t visualize the appearance of the parent div.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A div in 5 Parts</title>
    <style>
        div {
            margin: auto;
            width: 500px;
            height:500px;
            background-color: rgb(19, 119, 207);
        }
        .checking   {
            border: 10px solid rgb(255, 0, 98);
        }
    </style>
</head>
<body>
    <div id="checking">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="base"></div>
    </div>
</body>
</html>
16

That div has an id="checking" not class="checking".

17

“hit me in the head !” - of course - would you believe that I did know that
class is . and id is # ? OK so now with that embarrasment out of the way, I do see the red border so what am I to make of the situation? As I see it - I am guessing that I have 4 divs (1 parent 3 child) that are all (500 X 500) and the topmost child is behind the parent? Have I got that interpretation right?

18

Is that what the border you placed around the parent div is telling you? If the border isn’t helping you enough then change the color of the first child div and see which color shows up at the top.

19

See if this modified codepen helps. Boxes scroll

20

This is what I get with the color change of the first child div - so I think that this code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A div in 5 Parts</title>
    <style>
        div {
            margin: auto;
            width: 500px;
            height:500px;
            background-color: rgb(19, 119, 207);
        }
        #checking   {
            border: 10px solid rgb(255, 0, 98);
        }
        .top    {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="checking">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="base"></div>
    </div>
</body>
</html>

gives me 3 child divs of (500 X 500) with a parent div of (500 X 1500) so problem solved - I think.

Screen Shot 2021-01-04 at 12.52.51 PM
Screen Shot 2021-01-04 at 12.52.51 PM430Ă—1104 3.96 KB