...

View Full Version : float left



esthera
12-31-2006, 01:56 PM
I have image thumbnails with a product description underneath

i want them to appear like a table 4 on a row.

instead of using tables I'm just putting each image with description in a div and setting it to float:left

the problem is if a div is shorter or longer then it messes up the frame that shows under it.

Please advise what I can do about this. I want the height of the cell to grow based on the highest one in the row like it would if it was a table row?

haveacigar
12-31-2006, 02:15 PM
How about setting a width.. like


<style type="text/css">
.container
{
height:auto;
width:800px;
position:relative;
}
.products
{
height:auto;
width:200px;
position:relative;
float:left;
}
</style>
<div class="container">
<div class="products"><img src="product1.png" alt="" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in est sit amet ipsum ornare sagittis. Morbi feugiat enim. Nullam pulvinar lorem. Suspendisse massa felis, consequat ac, egestas id, facilisis quis, metus. Ut at justo.
</div>
<div class="products"><img src="product2.png" alt="" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in est sit amet ipsum ornare sagittis. Morbi feugiat enim. Nullam pulvinar lorem. Suspendisse massa felis, consequat ac, egestas id, facilisis quis, metus. Ut at justo.
</div>
<div class="products"><img src="product3.png" alt="" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in est sit amet ipsum ornare sagittis. Morbi feugiat enim. Nullam pulvinar lorem. Suspendisse massa felis, consequat ac, egestas id, facilisis quis, metus. Ut at justo.
</div>
<div class="products"><img src="product4.png" alt="" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in est sit amet ipsum ornare sagittis. Morbi feugiat enim. Nullam pulvinar lorem. Suspendisse massa felis, consequat ac, egestas id, facilisis quis, metus. Ut at justo.
</div>
</div>


get the idea?

Excavator
12-31-2006, 06:07 PM
Hello esthera,
I was having the same problem as you and it took a long time to figure out how to fix it.
This might be a little unconventional but it's CSS and it displays thumbnails in a fluid, centered layout.


CSS is:

#container {
text-align: center;
}
#container p {
display:inline;
font-family: "Comic Sans MS";
font-weight: normal;
color: #FFFFFF;
}
#container span {
margin:1em;
vertical-align:top;
width:300px;
display:table-cell;
display:inline-table;
display:inline-block;
}
#container p>span {
vertical-align:baseline;
}
#container p img {
margin-bottom:5px;
border: none;
}

and the markup is:
<div id="container">
<p><span><a href="your_pic.jpg.htm"><img src="thumbnails/your_picTN.jpg" /></a><br />product description here</span></p>
<p><span><a href="your_pic2.jpg.htm"><img src="thumbnails/your_pic2TN.jpg" /></a><br />product description here</span></p>
<p><span><a href="your_pic3.jpg.htm"><img src="thumbnails/your_pic3TN.jpg" /></a><br />product description here</span></p>
</div>

These are thumbnails each linked to their own .htm page.
Give this a try, it does what you want and it will do the 4 thumbs on a row once you get the widths down. If your container is fluid it will just keep re-arranging the thumbs to fit.

Excavator
12-31-2006, 08:22 PM
back again...

here is a sample (http://www.nopeople.com/CSS/thumbnail%20presentation/)

Karen S. Garvin
01-02-2007, 02:58 PM
Hi, I viewed this on FF Mac (1.5.0.6). The right two pictures are floating up because the captions for them are on two lines, while the left two pictures have one-line captions.

How would you align the pictures and not the captions? Add another div so that the captions have their own div?

Excavator
01-02-2007, 06:13 PM
Hi Karen,
I noticed that in FF2 here too... Even if you get the top aligned evenly, the next row will align itself to the staggered text ... so to fix it we need to give the p span a height so all the boxes around the pics are the same size. You will just have to give enough height to contain your longest description and live the the extra space under a thumb with a shorter description.

Here is the fix:


.wrapper span {
margin:1em 1em 1em 1em;
vertical-align:top;
width:150px;
height: 200px;
display:table-cell;
display:inline-table;
display:inline-block;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum