Reply To: [Solved] Trouble with float vertical alignment

[Kean]

Thank you for the speedy reply MDMueller.

The problem with that is it is aligning everything to the top. I really want the layout as specified in my original pen, i.e. with the name and the supplier and supplier phone number on the left, the customer and phone number on the right, and the stock in the middle of the two, but off to the right side of things (i.e just to the left of the customer thingy).

In my original example the layout is exactly as desired except that the customer name and the stock count are aligned with the name of the supplier, not with the product name, as desired. I fully recognise that I can add extra div containers to achieve the result I want, but I am trying to keep my HTML as “semantic” as possible. If there is no other way around it, I will just put the product name and supplier in a wrapping div and float it left, and the customer info and stock in a containing div and float it right. I would prefer not to do that however. I also know that I can use a negative margin-top on both the stock count and the client name and get the desired result. Again I would prefer not to do this unless I have no choice.

I guess what I am really trying to do is understand the box model / floats / positioning better. What I want to achieve may not be possible without negative margins or extra containers, which is fine, I just don’t want to resort to that out of ignorance of more elegant CSS-only solutions.