[sccc2008]

Hello,

I am trying to get a row of divs to align at the bottom of a container div. With the CSS I have applied, everything is aligning at the bottom but the divs (and the images and text within them) all seem to be stacking on one another. I need them to display in a row with a 25px margin-right to all of the divs inside of the container.

The following is the css code for the divs:

HTML Code:

#container {
	position: relative;
	height:300px;
}

#subdiv {
	position: absolute; 
	bottom: 0;
	float:left;
	width:25%;
}

The HTML is as follows:

HTML Code:

<div id="container">
     <div id="subdiv">
     Image and text inside.
    </div>
     <div id="subdiv">
     Image and text inside.
    </div>
     <div id="subdiv">
     Image and text inside.
    </div>
     <div id="subdiv">
     Image and text inside.
    </div>
</div>

If anyone can offer any assistance on this problem, your help is greatly appreciated.

[wirehopper]

The subdivs should probably be classes.

HTML Code:

.subdiv
{
  /* Dimensions, float, alignment */
  /* Avoid absolution positioning, as these settings will apply to all four subdivs */
}

<div class="subdiv"> ... </div>