Shinji-san Shinji-san - 5 months ago 7
HTML Question

Floating left and inline-block working for only some elements

I am trying to use inline/inline-block to get a simple two row layout but it's not working for my third element. I want the top row to have three pictures and the bottom row to have text under each picture that the text pertains to. Can someone explain what I'm doing wrong?



.floatL {
float: left;
}

.box div {
display: inline-block;
}

<div class="box">

<div class="floatL">
<img src="dog1.jpg" alt="Picture of a Dog" width="100" height="100">
<p>Something about the dog</p>
</img>

</div>

<div class="floatL">
<img src="cat1.jpeg" alt="Picture of a Cat" width="100" height="100">
<p>Something about the dog</p>
</img>
<div class="floatL">

<img src="colors1.jpg" alt="Picture of Colors" width="100" height="100">
<p>Something about the dog</p>
</img>

</div>

</div>




Answer

As @Johannes says, the third floated element was nested.

You need to properly indent, and you will catch these more easily.

Also, you don't use closing tags on img.

See this fiddle for a refactor of your code.