I have a <td>, and inside it I have tow <div>s. I want one to align to the top, one to align to the bottom. Right now the <td> has vertical-align:top, so they both go to the top..

Any tips?
Here's the page if you want to look at it: http://skeddles.com/v4/

Why don't you just use two divs.

<div id=one>
</div>

<div id=two>
</div>

Now, you just give each of the ma height, and use margins to place them wherever you want.

#one{
height: 80px;
}

#two{
height: 80px;
margin-top:20px;
}

Edit:
If you want to have control over them as a whole, wrap them both in another div, and style that one too.

Hint: get rid of the tables !!! You don't need them and tables for layout should be avoided.

Vertical-align does NOT apply to divs, you need other solutions, but the first is getting rid of the tables.

I think now it's the time to switch to a CSS layout. There's still time because if you continue like this you will end up with really messy code. Also, for basic rollovers you don't need javascript. Have a look at the old but good CSS Sprites method. If you need more fancy rollovers then CSS Sprites2 is the way to go

For example:
<div class="link"><a href="home.htm" class="menu home"></a></div>
<div class="link"><a href="home.htm" class="menu home"></a></div>
<div class="link"><a href="home.htm" class="menu home"></a></div>

could easily be replaced by an unordered list.

Just my 2 cents

Originally Posted by LadynRed

Hint: get rid of the tables !!! You don't need them and tables for layout should be avoided.

Vertical-align does NOT apply to divs, you need other solutions, but the first is getting rid of the tables.

I know, everyone says that, but I cant get divs to do just what I want, when tables do.


Maybe you could help me by answering some questions:

1.When making the layout, should I put each row in a div? Or just leave things separate and line break or whatever at the end of a row.

2.How do I make certain things stretch correctly? My site needs to stretch vertically horizontally and vertically. With tables it does. How do I make sure some divs stretch, and some stay on the correct sides where they're supposed to be?

3.Why won't my divs even stay on the same line?

@tsiger: Thanks, i'll be sure to do that.

EDIT:

Okay, I tried to redesign my site completely with css.
http://skeddles.com/v4/
The problems are:
I still don't know how to fix the original problem: Two divs inside another div, one should be at the top, one at the bottom.

Also, it doesn't stretch. At all. I just don't know how to do it.


EDIT2:
I just realized the site gets completly destroyed in IE(I use FF). Any tips?

1. it depends.

2. make some fixed widths, the others have percentage or em widths so they will adjust.

3. <div>s are block elements, so have an implied line break above and below them. Use floats to keep them on the some horizontal plane.

vertical-align will only apply to inline elements http://www.candsdesign.co.uk/referen...ertical-align/

Skeddles, it sounds to me as if your css layout attempts might have been limited to layouts with just absolute positioning - not the best way to do a layout and does have a lot of problems associated with it. I would suggest learning how to do CSS layouts from scratch, and learn about floats.