Here's the page I'm working with ....

 

http://www.starlightstudio.jp/3columns_test_001.html

 

There'll be a column of items the same as Mesosphere running down the centre of the page. My first problem, for some reason the centre div and the right div of the Mesosphere item are clearing the thumbnail div in Firefox and expanding the parent div vertically. This doesn't happen in IE, which looks to be working perfectly. How can I fix this?

 

Also, am I actually going about this the right way? I'm a relative beginner. If there's a better way I can have a column of menu items like this, I'l be glad to hear.

 

Thanks

Mark

hi...

 

I don't know the answer.. but here I am sure you will find the answer.

 

http://css-tricks.com/all-about-floats/

 

Bests

Well i didnt have much time to mess with it. but i noticed it does not have that issue when you remove the div the image is in and place the image in the div below it. so Im guessing your problem lye's within that top div

 

Example

 

					<div id="shortpiece_item">	


<!-- END THUMB BOX -->

					<div class="shortpiece_title" style="width:75px; border-width: 1px; border-style: solid; border-color: #333333; margin-top:2px;  font-family: Arial, Helvetica, sans-serif; font-size: 9px; text-align: center; color: #666666;">

<!-- moved image here and removed the top div-->
<img src="img/mesosphere_item_btn.jpg" width="75" height="75" border="0"/>

					MESOSPHERE
					</div><!-- END TITLE BOX -->

 

obviously this is not what you want but its a starting point for trouble shooting

Thanks! That did the trick. Looks like putting the title in the image div works also.

 

And thanks for the float link. Very informative.

 

Thanks

Mark