Images not floating across screen!

kaymeis · March 3, 2010, 1:16pm

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>

&lt;img src="DSC1A.jpg" width="150" height="113"class="float" alt="Tennis"/&gt;
	&lt;p&gt;Caption&lt;/p&gt;

&lt;img src="DSC2a.jpg" width="150" height="113"class="float" alt="Tennis"/&gt;
&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;



&lt;img src="DSC5a.jpg" width="150" height="113"class="float" alt="Tennis"/&gt; 
&lt;p&gt;Caption&lt;/p&gt;


&lt;img src="DSC7a.jpg" width="150" height="113"class="float" alt="Tennis"/&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

&lt;p&gt;Caption&lt;/p&gt;

</div>

</html>

PicnicTutorials · March 3, 2010, 1:24pm

wrap each img/caption in a div and float the div left with text-align center and some margin between them (if you want it).

ralphm · March 3, 2010, 1:32pm

kaymeis, are you using any CSS with that? I just wanted to make sure that you weren’t expecting class=“float” to make the images float. Using class=“float” with .imgFloat{float:left;} won’t make the images float. You would need

img.float {float: left;}

… though that’s not going to achieve what you really want.

You could do what Eric suggests, or you could also mark up your code as a list, like this:


<ul>
          <li>
            <p><a href="some.jpg"><img src="tnail-sample.jpg"
                 alt="" />caption</a></p>
          </li>

          <li>
            <p><a href="some.jpg"><img src="tnail-sample.7.jpg"
                 alt="" />caption, continued and more for a long
                 caption</a></p>
          </li>

That’s how it’s done on this page, which is worth reading, as it has some useful tips on getting this kind of gallery to display right.

kaymeis · March 3, 2010, 4:54pm

All the images are still floating left instead of across the screen. The captions are straying to the right instead of underneath. here is the css and html again.

div.imgdsc1a{float:left;
margin:10px;
text-align:center;}

div.imgdsc2a{float:left;
margin:10px;
text-align:center;}

 div.imgdsc3a{float:left;
          margin:10px;
          text-align:center;}
          
          
          
           div.imgdsc4a{float:left;
          margin:10px;
          text-align:center;}

div.dsc5a{float:left;
margin:10px;
text-align:center;}

    div.imgdsc7a{float:left;
          margin:10px;
          text-align:center;} 
          
div.dsc8a{float:left;
          margin:10px;
          text-align:center;}   
          
          
 div.dsc9a{float:left;
          margin:10px;
          text-align:center;}

div.dsc12a{float:left;
margin:10px;
text-align:center;}

     div.dsc15a{float:left;
          margin:10px;
          text-align:center;} 
          
  div.dsc17a{float:left;
          margin:10px;
          text-align:center;}  
   
    div.dsc18a{float:left;
          margin:10px;
          text-align:center;}  
          
     
      div.imgdsc23a{float:left;
          margin:10px;
          text-align:center;}

div.imgdsc25a{float:left;
margin:10px;
text-align:center;}

 div.imgdsc22a{float:left;
          margin:10px;
          text-align:center;}

&lt;p&gt;&lt;img src="DSC1A.jpg" width="150" height="113" alt="Tennis"/&gt;Tennis&lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;&lt;img src="DSC2a.jpg" width="150" height="113" alt="Tennis"/&gt;Tennis&lt;/p&gt;

</div>

<div class=“DSC3a”>
<p><img src=“DSC3a.jpg” width=“150” height=“113” alt=“Tennis”/>Tennis</p>
<div class=“DSC4a”>
</div>

<p><img src=“DSC4a.jpg” width=“150” height=“113” alt=“Tennis”/>Tennis</p>

</div>

&lt;p&gt;&lt;img src="DSC5a.jpg" width="150" height="113" alt="Tennis"/&gt; Tennis&lt;/p&gt;

</div>

<p><img src=“DSC7a.jpg” width=“150” height=“113” alt=“Tennis”/>Tennis</p>

</p>
</div>

<p><img src=“DSC8a.jpg” width=“150” height=“113” alt=“Tennis”/>Tennis</p>

</div>

<p><img src=“DSC9a.jpg” width=“150” height=“113” alt=“Tennis”/>Tennis</p>l
</div>
<div class=“DSC10a.jpg”>

<p><img src=“DSC12a.jpg” width=“150” height=“113” class=“float” alt=“Tennis”/>Tennis</p>
</div>

<div class=“DSC15a”>
<p><img src=“DSC15a.jpg” width=“150” height=“113” alt=“Tennis”/>Tennis</p>
</div>
<div class=“DSC17a”>
<p><img src=“DSC17a.jpg” width=“150” height=“113” alt=“Tennis”/>Tennis</p>
</div>
<div class=“DSC18a.”>
<p><img src=“DSC18a.jpg” width=“150” height=“113” alt=“Tennis”/>Tennis</p>
</div>

<p><img src=“DSC23a.jpg” width=“150” height=“113” alt=“Tennis”/>Tennis</p>

</div>

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

</div>

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

</div>

PicnicTutorials · March 3, 2010, 5:33pm

Hello,

use only one class in your css and say it only once >> and the css/html should look like below…

div.class1 {
float:left;
margin:10px;
text-align:center;
}

<div class=“class1”>
<img src=“DSC25.jpg” width=“150” height=“113” alt=“Tennis”/>
<p>Tennis</p>
</div>

RyanReese · March 3, 2010, 8:16pm

Off Topic:

Add display:inline; there to cure an IE6 bug