I have a row of several divs lined up beside each other horizontally. Sometimes when I load the page in firefox some of those divs get pushed to the next line, other times it is lined up fine. You can see the example here. This is the first time I have tried doing a pure css design. So I'm not really sure why it's doing this. I have just been randomly trying different solutions mentioned on other forum threads, but nothing seems to work. Really it's probably something quite simple. The first person who provides a working solution or offers to fix this for me gets $10. By the way, I did post this in a different topic yesterday offering $5, but it's not fixed yet. I realized there was a css subtopic. So if there is a problem with duplicate posts, hopefully the other post can be removed. Thanks.
Your container width is 998px but the div within it total up to more than 998px. One suggestion for you, make use of a external CSS instead of in-line CSS.
I don't see any problems in my Firefox on Ubuntu, but ORiN likely has it right. If you are floating boxes, and their parent container isn't wide enough, then just like wrapping text, the floats will drop down to the next line. Making their parent container always wide enough prevents this.
No everything is set to the exact width to line up perfectly. Most times when the page loads everything fits. I even just tried making everything a little narrower and it still causes the same problem. I know enough to make the container wide enough to fit everything. If that weren't the case, it would wrap onto the next row everytime. Are either of you willing to take a shot at fixing this problem if I provide ftp access?
Have a look at the validator's results. It says there's a closing div missing somewhere. Might be that you need to give the lists a width too. One thing that I like to do to see what goes wrong with positioning is to give a 1px border to the elements I'm struggling with. border:1px solid #000; Code (markup): That way I see what is where exactly. Keep in mind that border will ad 1px of extra width around the element you give that border to. Also, do as Orin says, place the css in a stylesheet, get rid of the inline styling.
I am unable to reproduce the problem. However Señior Dogs mentioned a border which gave me an idea of what might possibly be happening (maybe): Browsers are very different in how they round, and both Mozilla and IE (and lord knows who else) have 1px rendering bugs with containers based on whether containers are odd or even-numbered in pixels... with em's it's even worse. Some browsers round up while others round down, and this gets compounded if your container (or its container, or its margins within its container) have any flexibility (such as you get when you use automargins to center someone). Instead of actually using border like Dogs said to "see" what floats and float containers are doing, I'll use a background colour most of the time instead, simply because border adds to size and when things might be wrapping due to a 1px difference, a border can sometimes cause more problems. However, if adding a 1px border stabilises stuff so that it's ALWAYS one way (either floats always wrap or never wrap) then that's a good way to find out you've got a 1px bug appearing somewhere! And sometimes, instead of digging around to find that perfect width that works in everyone, you also have the option of just leaving an invisible border: either the same colour as the background, or if the background changes, you can do a transparent border (for IE6 this will only work if the border state is dashed instead of solid... for whatever reason). This may not have anything to do with the float box, but it needs to be fixed. A tag mismatch is easily a serious way to screw with browsers, and it's a good way to lose hair trying to fix rendering bugs if you have major errors. Is Firefox the only browser to do this to you, or do any others also do this? (PS ideally you won't need to give anyone server access to fix this: if the page has separate css, that makes it way easier to manipulate... someone can copy the html/css, play with it on their own server, see what works, and simply give you the code here on the forums... that way, you didn't give away server logins via something that is neither private nor encrypted like PMs or email) (PPS it would also be really really really nice to get the code before some optimiser program runs through and makes it unreadable by removing all whitespace like that)
Thanks for everyone's help. I fixed the major validation errors and moved the css to an external file, but the alignment issue still exists. I'm just tired of dealing with this myself. If anyone can fix this for me, please message me. I'll try posting this in the services section too.
Doh the issue was simply that I had to use float:left; for all divs in the row. I think I tried that before but it wasn't working due to the display type. Thanks for all your help.