[SOLVED] CSS and the 'display: inline-block' Element

killingthemonkey · 10-30-2016, 12:42 PM

OK, I'm working through the book, HTML5, JavaScript, and jQuery 24-Hour Trainer.

I'm not very far in, and I run into this issue. This code produces three blocks, red, green, and blue. They should be next to each other. For whatever reason, the HTML and CSS puts them one over the next.

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        .box {
            height: 200px;
            width: 200px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box" style="background:red" />
    <div id="middleBox" class="box" style="background:green" />
    <div id="lastBox" class="box" style="background:blue" />
</body>

</html>

I even went so far as to copy and paste from the book, just to make sure my code was actually what the book was telling me to type. No change.

If you comment out the last square, you see the middle. If you then comment out the middle square you see the first.

Thanks for your help,
Doug

keefaz · 10-30-2016, 01:55 PM

You can't use self closing tags with div's, not like some other elements like input, hr, img etc

Use explicit closing tag, <div...></div>

killingthemonkey · 10-30-2016, 02:01 PM

That was it, exactly.

Thank you.

Quote:

Originally Posted by keefaz

You can't use self closing tags with div's, not like some other elements like input, hr, img etc

Use explicit closing tag, <div...></div>