CODEWITHSUNDEEP
htmlcss
Geoff_S
Geoff_S

Reputation: 5107

CSS, floating 2 images in a div each with respective text underneath

enter image description hereI have a site/page, http://watershedgeo.staging.wpengine.com/hydroturf/, where I'm trying to float 2 images left in a div and they each have a little text block that needs to go underneath. One block per image.

The issue is that my images are aligned at the top and bottom but the text underneath is way offset currently.

Here is the code for them:

<div>
<div class="container1" style="float: left;"><img style="float: left;" src="/HydroTur-CS_illustration-01152104.jpg" /></div>
<div style="float: left;"><span style="color: #0079ac; font-weight: bold;">HydroTurf CS</span>
HydroTurf CS is typically used for high velocity conditions and for protection of critical structures.</div>
<div>
<div class="container2" style="float: left;">
<div><img style="float: left;" src="/HydroTurfZ_illustration-01152014.jpg" /></div>
<div style="float: left;">"<span style="color: #0093d0; font-weight: bold;">HydroTurf Z</span>
HydroTurf Z is ideal for less critical applications involving lower velocities and flow conditions</div>  
</div>
</div>
</div>

Upvotes: 1

Views: 43

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

Unless you specify the width of any block element such as a div, it will take up 100% of the width. So you need to set the width of your containers to 50% if you want them to take up half the available width, for example.

Also, you don't need to float everything inside the container, the container is its own "block" and you want everything displayed as blocks (i.e. full width and on top of each other) inside it.

You want something like this:

.container { float: left; width:50%; text-align:left; }

/* You won't need the next line, it is simulating the images */
.container img { width:250px; height:150px; background:#FFFF00; display:block; }
<div class="container">
<img src="/HydroTur-CS_illustration-01152104.jpg" />
<div>
    <span style="color: #0079ac; font-weight: bold;">HydroTurf CS</span> HydroTurf CS is typically used for high velocity conditions and for protection of critical structures.
</div>

</div>
<div class="container">
<img src="/HydroTurfZ_illustration-01152014.jpg" />
<div>
    <span style="color: #0093d0; font-weight: bold;">HydroTurf Z</span> HydroTurf Z is ideal for less critical applications involving lower velocities and flow conditions
</div> 
</div>

Upvotes: 2

Related Questions