How to align thumbs to the left

[ilanphoto]

I have tried to align my thumbs to the left. I have been using

Code: Select all

.thumbnails
  {
    float: left;
  }


p.small
  {
    clear: both;
  }


In IE this was not too bad - there was a small problem though when there were no comments the "vote" link was on the right of the page and not at the bottom as a comment was added both the comment and the vote link found there way to the bottom
Now I have started using firefox and have found many display problems some I have fixed some I need some time to try out solutions. This problem is even worse as the vote AND comments are positions on the right of the thumbs and I get a landscape display which requires scrolling up downs and left right which I don't like

Question - If I have a background picture on the right part of the screen and I want my thumbs in three or at most 4 columns on the left How can this be done in a way that all browsers will understand it and yet have the comments and vote at the bottom.

Thanks for all your help
Ilan

[alangrant]

Floats can be tricky things, especially with PBase where you don't have full control over all elements of the page. The problem here is that if you use a float, you really need it to be followed by a block element with the "clear" property. But there is no suitable element - the voting/comments section is just a generic table with no class specified. I did have some success with

Code: Select all

table {clear:both}


... but this seemed far too risky as it would apply to any table.

(By the way you mentioned p.small, I don't think it is used here at all - it is used for the number of page views. There are various other .small elements but they aren't really suitable to act as a clearing block).

So I decided that it would be better to try to get away from the float idea completely. What you are really trying to do (I think) is (a) restrict the width of the thumbnails section so that it leaves some clear space for the background picture and (b) anchor the thumbnails section to the left of the page, so that the clear space is on the right. I think this can be achieved fairly directly by replacing your code with

Code: Select all


.thumbnails
{
  width: 600px;
  margin-left: 0;
}


I think this is broadly what you are looking for, obviously you can experiment with the 600px value, it could also be a % rather than px.

[ilanphoto]

Alan Thanks
This seems to be working perfectly

[jypsee]

In the style sheet that I've whomped up for my root gallery I have no scroll bar when I open it in Mozilla; I can only access all the galleries if I use the treeview.

here's the link:
http://www.pbase.com/jypsee/root

any ideas on how to fix this???

TIA...