Hey everyone. I am writing an all div layout for my friends website and i just cant seem to get all the fields aligned properly. I can get all my images to be aligned and look great until i put any text on the site. For example, my box that will contain links and such has 3 parts: top, middle and bottom. Each of these have 3 parts: left, middle and right. To program the 3 parts of each row, i use 3 divs which are all floated based on their position. However, as soon as I put text in the middle area, the right image is moved down to a new line. The sample site is located at http://www.fffanatics.trap17.com/bus/profile.html. Please let me know if you have any advice or suggestions on how to fix this. Thanks a ton

What really helps out when debugging is putting borders on your DIVs just to help visualize what's going on.

What I'm seeing is that your "background" DIVs are being pushed to the right because your text flow isn't above where you really want it. With that particular DIV, you need to set your width so that it doesn't overflow the DIV, and then use a background for that DIV to match the rest of the image.

Or you could just use that image and position your text using absolute/relative positioning over the image itself.

search: clear floats html