New to CSS and having problems with alignment and layout
Hi, I gather my problem is nothing new, and if anyone can point me in the direction of a good best-practice guide or treatise on aligning, etc, I promise I'll shut up and go away.
However, I'm having difficulty getting exactly the layout I want from HTML/CSS for a project I'm working on. I'm trying to basically replicate the look and feel of the Apple Address Book application for the portion of my project that displays contact information.
I basically want it to have right aligned labels for the contact data fields, and the actual data to sit left aligned just next to it.
A picture will probably convey this concept better.
The first box is what I want it to look like, the second is the div/span breakdown I currently have, and the third is what I'm probably going to end up having to do, but I don't know the styles to use.
At the moment I have the labels as spans with the style width set to 20% and text-alignment as right. I've made the data fields spans also, but that's obviously not working because when they wrap, the next line is aligned to the start of the container, rather than to the right of the labels.
Do I need to float:right the data fields in a container? Or set some kind of margin to the left for the data fields and have the labels float?
I'm pretty lost here, any help would be appreciated. I'm still awe-struck at how much layout based fluff actually needs to be put into the HTML portion of the web stack and am perhaps trying to resist seemingly unnecessary divs as much as possible. It's hurting my face.
Posted Dec 2, 2011, 1:04 AM UTC