Positioning Images with <div>

liunx

Guest
I am using the style " div {float:left;} to position a bunch of thumbnails, but I can't seem to get an even spacing on both sides of the rows made from the floating images. I am using "margin: 5px 5% 5px;" and I thought that would allways put 5% of the remaining page on either side of each image. but the right hand side of the frame is larger sometimes, depending on the # of images per row. Do you understand? <br />
<br />
Take a look at: <!-- m --><a class="postlink" href="http://www.home.earthlink.net/~svoltmer/">http://www.home.earthlink.net/~svoltmer/</a><!-- m --><br />
<br />
You'll have to click the "Portfolio" link because I am using frames. Thanks!<!--content-->do you really want to know why? you should avoid using div tags for text. they are a blcok level element. span tags are for text.<br />
<br />
<br />
but just to show you what is happening add this to your class "float"<br />
<br />
border-style: ridge;<br />
<br />
that will show you what is going on. you will see it is your words that are making the div tag expand in some places. use a span tag and then you have to put a line break after the image.<!--content-->Thanks, but placing a border on my floated images & text don't show me why there is more margin on the right side of my rows than my left on certain screen sizes. I thought that a % was a % and would be divided acordingly. Thanks anyway.<!--content-->It was to show you that the text you have is spreading it out more.<br />
<br />
and if you would have read the rest of my post you can see by changing the div tag to a span tag it would have fixed it.<br />
<br />
so this<br />
<br />
<div class="thumb">Car Rental Ad</div><br />
<br />
changes into this<br />
<br />
<span class="thumb">Car Rental Ad</span><br />
<br />
and if you don't do that then just delete Car and you will see if fixes it.<!--content-->As it turns out getting the spacing on either side of the page is kinda in the background for now, because I noticed that the thumbnails aren't lining up from left to right in Netscape 7.02 they are one on top of the other. If you have any idea why this is happening I'll be glad to hear it. Thanks for your time!<!--content-->I use mozilla and that is the same engine as NS7+. what I suggested would work for both of your problems.<!--content-->
 
Back
Top