can this be done with css?

[dyers78]

I have 4 "boxes" containing text and I want the links all equally lined up at the bottom of each box instead of staggered.

I played with the vertical align but did not get what I wanted. here is a screen shot how it sits.

http://www.unitedwayqc.org/images/image.jpg

http://www.unitedwayqc.org/image.tiff
http://www.unitedwayqc.org/html/image.tiff

[Jackimalyn]

yes, use <div> tags... each <div> make the width 25% and have them nested.

If you were just asking about the text, you can

{vertical-align: bottom or baseline} in your css

[Benjamin]

It can be really tricky to line up columns like this in CSS, especially if you want the columns to have a flexible width so that the page resizes horizontally, and if you need to allow for unlimited amount of text in the box (eg the content is controlled by a CMS).

Assuming you don't need a flexible width, probably the simplest solution is to give a specific height to the paragraph with the grey text:
p.intro { height: 5em; }

If you define it in EMs then at least they will grow if the text is resized and the box won't break. This solution will work fine as long as you can predetermine the amount of text in the grey paragraphs. If the content is controlled by a CMS, for example, it might cause problems, because someone might enter so much text that it expands over your height. In that case you might need to investigate a much more complex solution such as nesting all the divs, which will be a headache.

[dyers78]

each box is it's own nested div right now. I have the parent container div and each sub box is set to a specif width. No CMS involved

<div id="news">

<div id="children">
<h1>Successful<br />Children &amp; Youth</h1>
<p>Learn how United Way is dealing with the root problems concerning area youth through the 40 Assets.</p>
<p><a href="http://www.unitedwayqc.org/html/AssetMicroSite/intro2.html">Be an Asset Builder</a></p>
</div>

I tried to target just the #children a {verticle align: bottom} but I did not get any results.

[Benjamin]

That's not what I mean by nesting. It is very complex to force adjacent DIVs to have the same height based on their content.

The 'vertical-align' property only works with inline elements. It is not designed to work in the way you want.

Try what I said about defining a height on the grey paragraphs.

[dyers78]

sweet! worked great, thanks for the tip. I love this forum!!!!