Div child elements not appearing in div

Question

I wrote this element with HTML and Bootstrap.

    <div class="container" align="center">
        <h3 class="column" style="padding: 30px"> My Projects </h3>

        <div class="container" align="center" style="width: 40%; border: 2px solid #00CC11">
            <img src="./images/rectsimg.png" alt="Rects-Fight" style="float: left; width: 50%">
            <a href="./python/rects-fight.html" style="float: right; padding-right: 12%"> Rects Fight! </a>
        </div>
    </div>

What should occur is that the image and link should appear inside the div, therefore inside the borders of the div when rendered.

Instead for some reason it ends up like this, with the elements outside of the div instead of the inside:

Ive checked the HTML code and everything seems syntactically correct, what could I be doing wrong?

Thanks for marking it as a duplicate, could not figure out how to word the issue specifically. — Mercury Platinum, Apr 06 '18 at 19:54

score 1 · Answer 1 · answered Apr 06 '18 at 19:52

Just a suggestion should be correct add the ; at the end of each style

<div class="container" align="center">
    <h3 class="column" style="padding: 30px;"> My Projects </h3>

    <div class="container" align="center" style="width: 40%; border: 2px solid #00CC11;">
        <img src="./images/rectsimg.png" alt="Rects-Fight" style="float: left; width: 50%;">
        <a href="./python/rects-fight.html" style="float: right; padding-right: 12%;"> Rects Fight! </a>
    </div>
</div>

a better suggestion would be to avoid inline style ... and delete things like the `align=center` — Temani Afif, Apr 06 '18 at 19:55

Div child elements not appearing in div

1 Answers1