Hi all,

 

Just stuck on how to get my elements to float top to bottom. I have my html book out and it seems I can only float left and right, is that right?

 

To give you an idea of what I'm trying to do...have a look at this link

 

http://www.hala.co.uk/

 

This designer has made the thumbnails float left to make them sit in a row, I want my thumbnails to stack up on top of each other like in a column vertically. How do I do this with out positioning each thumbnail.

 

I have been fiddling with the different variables to see how to make it work, but cant seem to get it to work!

 

Any advice would be great!

 

Thanks

In your page you have a list for all the thumbs images with float: left; for the li tags, so delete the float: left and I thnk they will form a vertical list:

ul#thumbs {float: left; display: inline; width: 700px; margin: 10px 0px 0px 175px;}
#thumbs li { /*float: left;*/ width: 98px; height: 48px; margin: 10px 10px 10px 0px;}

 

The width of the ul tag at 700px will then be much wider than it needs to be.

It doesn’t seem to work , when I delete the float element, all the thumbs end up directly on top of one another, so that the ones underneath disappear under the one on top.

 

heres my code

 

#windowbody_div {width:700px; height:630px; position:absolute; left:130px; top:250px;}

 

 

#window_div {background:transparent url(welcometext.png) no-repeat scroll center top; border:0px; display:inline; float:left; width:700px; height:500px; position:absolute; top:120px; right:0px;}

 

body, div, ul, li, a, img {border:0 none; font-weight:normal; margin:0; padding:0}

 

img a, img a:hover {border:0 none;}

 

ul {list-style-type:none;}

 

li {font-size:5px}

 

ul#thumbs {display:inline; margin:10px 0px 0px 10px; width:100px;}

 

#thumbs li {margin:10px 10px 10px 0px; height:100px; width:100px;}

 

#thumbs img {border:1px solid #087ba1; position:absolute; top:0px;}

 

#thumbs a:hover {background:transparent none repeat scroll 0 0;}

 

#thumbs a img.windowimage {border:1px solid #087ba1; width:700px; height:500px; position:absolute; top:120px; right:0px; visibility:hidden; z-index:1;}

 

#thumbs a:hover img.windowimage {visibility:visible;}

Can you explain what you're trying to achieve in more detail? You want a group of thumbnails which appear to be in rows and columns like a table?

 

It's true that CSS only allows you to float left or right because the natural flow of an html document is top to bottom.

I meant you to remove float: left; only from the li tag, see my code previously.

 

I've tried my code with your first two thumbnails and it works, but if I delete float:left; from the ul#thumbs tag as well, I see the problem you have.

 

I left the width: 700px; in the ul#thumbs style. It can be reduced if you want, provided you only delete float: left; from the li tag.

No table, just a single column, no row, I have 2 thumbs that I am trying to get to sit on top of one another, for some reason the will not budge.

 

I'll post a visual...

 

You can see only one thumb, the other one is hiding behind the visible one...I plan to make my window smaller...500px and have thumbs on either side, one set going down on the left and one going down on the right.

 

I have done a quick mock up to explain what I'm trying to achieve.

here is the updated code, but still same problem

 

ul#thumbs {display:inline; float:left; margin:10px 0px 0px 10px; width:100px;}

 

#thumbs li {margin:10px 10px 10px 0px; height:100px; width:100px;}

 

Do you think it has anything to do with the div underneath? …the display window?...or perhaps the margins?

You're moving the goalposts!

 

My solution only produces one vertical column on the left.

Is the link to your site or just an example

You're moving the goalposts!

 

My solution only produces one vertical column on the left.

 

 

I only thought about other options because the code doesn't seem to work, I think there may be something else in my code which is over riding the code you suggested. any ideas?

Is the link to your site or just an example

 

I'm afraid not, the site is not live yet.

#windowbody_div {width:700px; height:630px; position:absolute; left:130px; top:250px;}

 

Is a container div that contains all the thumbs and the window...

 

Ok heres what I'm going to do, I'm going to adjust the size of the window to see if it’s getting in the way of the thumbnails lining up vertically. Will post back to let you know if it works.

humm, tried it...nope thumbnails won't budge

Could you post up your html and css

here you go...going for a quick munch, (still not eaten, been pulling my hair out over this) be back shortly. thanks for helping out! really appriciate it.

mebodesign_temp.html

mebodesign_temp.css

I'm back, any luck? does it make sense? I'm not really sure what to do.

Try Removing your position:absolute; and top:0; from #thumbs img

 

you might have to add a display:block; to that also

Try Removing your position:absolute; and top:0; from #thumbs img

 

you might have to add a display:block; to that also

 

 

excellent! thanks you so much! it worked!