images not floating across screen!

[kaymeis]

Can some one tell my code isnt working. I'm trying to float images across the screen with captions underneath them. But they all end up on the left side of the screen.Please help! Below is the css the html:


.imgFloat{float:left;}

p{text-align:center;}

<div id="centermain">
<h4>Tennis Gallery</h4>


<img src="DSC1A.jpg" width="150" height="113"class="float" alt="Tennis"/>
<p>Caption</p>

<img src="DSC2a.jpg" width="150" height="113"class="float" alt="Tennis"/>
<p>Caption</p>


<img src="DSC3a.jpg" width="150" height="113"class="float" alt="Tennis"/>

<p>Caption</p>

<img src="DSC4a.jpg" width="150" height="113"class="float" alt="Tennis"/>

<p>Caption</p>



<img src="DSC5a.jpg" width="150" height="113"class="float" alt="Tennis"/>
<p>Caption</p>


<img src="DSC7a.jpg" width="150" height="113"class="float" alt="Tennis"/>

<p>Caption</p>


<p><img src="DSC8a.jpg" width="150" height="113"class="float" alt="Tennis"/>

<p>Caption</p>


<img src="DSC9a.jpg" width="150" height="113"class="float" alt="Tennis"/>

<p>Caption</p>


<img src="DSC12a.jpg" width="150" height="113" class="float" alt="Tennis"/>

<p>Caption</p>


<img src="DSC15a.jpg" width="150" height="113"class="float" alt="Tennis"/>

<p>Caption</p>




<img src="DSC17a.jpg" width="150" height="113" alt="Tennis"/>


<p>Caption</p>


<img src="DSC18a.jpg" width="150" height="113" alt="Tennis"/>


<p>Caption</p>


<img src="DSC23a.jpg" width="150" height="113" alt="Tennis"/>

<p>Caption</p>


<img src="DSC25.jpg" width="150" height="113"class="float" alt="Tennis"/>

<p>Caption</p>


<img src="DSC22a.jpg" width="150" height="113" class="float" alt="Tennis"/>


<p>Caption</p>


</div>




</html>

[topr8]

well for a start: try class="imgFloat" :)

but i'm not sure it will work how you want as the caption isn't being floated

[rocknbil]

I'm trying to float images across the screen with captions underneath them.

You will need some sort of container to keep the image and paragraph together. You are also always supposed to apply a width to the float, hopefully, you can do that (looks like you can.)



.imgFloat { float:left; width:150px; margin-right: 6px; text-align: center;}

.imgFloat p { margin:0; padding:6px 0 0 0; }

....

<div class="imgFloat"> 
 <img src="DSC1A.jpg" width="150" height="113" alt="Tennis"> 
 <p>Caption</p>  
</div> 

When you start wrestling with why it won't fit X number of containers on one line, remember the box model differences in browsers, you'll have to play with paddings and margins a little.

Also note that floated elements will not center. You can center the text/images inside the floated element but not the row of elements themselves. You won't get a "centered" row unless you wrap the entire row in a specific width container on which you apply margin:auto.

While you're at it, it's a much better idea for maintenance and (mild) SEO contributions to do this

describe-image-instead.jpg

instead of

DSC1A.jpg

[Auciker]

Link please? I'm a visual person.

[rocknbil]

See TOS #13 [webmasterworld.com]