1 reply [Last post]
Anonymous's picture

I'm in the process of creating a site entirely in css. I've got a header div which contains an image floated to the left and a '<p>' enclosed title floated left alongside it. I want the title to be able to wrap - which is no problem with the '<p>' aligned to the top of the header, however for aesthetic purposes I want it aligned to the bottom.
I've tried using top padding and margin on the '<p>' to make it align to the bottom of the header div but when the contained text wraps it stretches the header div and breaks the design. So what I'm looking for is a way to align the '<p>' to the bottom of the header div without padding or margins and that allows the contained text to wrap upwards... Much like having the text in a table cell with its alignment set to 'bottom'.

I hope this makes sense...

Any help with this would be much appreciated as I've done a fair bit of reading up on it and haven't been able to find a solution.

Sven's picture
Brisbane, Australia
Last seen: 15 years 26 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

bottom aligning a paragraph

Hmm, not as easy as it sounds! A few things I noticed:

* The title can be aligned with the image's baseline by using the vertical-align property. However, the title needs to be in a span, rather than a div for this to work.

* Even if the elements are aligned at the baseline, wrapping still ends up dropping the overflow text under the image.

* Floating the elements removes the ability to align at baseline using the vertical-align property.

Anyone have any bright ideas?