Positioning Wrong on Some Items

HTML & CSS
1

Hey Guys,

Im guessing its cause some of the titles are way too long for where the content is going so could someone give me a hand on how can solve this issue…

Here is example of what is not correct need some of the information to move next to the main image…

http://fuzzypanda.ca/cardemon/cars-for-sale/2008-chevrolet-avalanche-1500-18499779

Here is example of one with shorter title how it should look, how can I easily achieve this even for the ones with longer titles?

http://fuzzypanda.ca/cardemon/cars-for-sale/2007-dodge-dakota-18504271

Thanks,

Mike

2

Hi,

You could try a max-width here:


.car_details_box {
 max-width: 400px;
}

Floats are only as wide as the content they hold but a line of text will push a float to be 100% wide and therefore it won’t fit next to anything at all.

3

Thanks, that has worked but now the thumbs below the picture get bumped down more when theres two lines but I guess thats what happens since theres an extra line now in the title.

4

Reduce the line-height on that h2 and it won’t look so bad when it wraps. You have it at 70px.

You can’t have the thumbnails not move unless you put the image and the thumbnails in the same floated div but then you couldn’t have the right column text merge into the middle. It’s either one or the other.