469,352 Members | 1,836 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,352 developers. It's quick & easy.

Is there an equivalent of valign="bottom" for a table within a DIV using CSS?

Is there an equivalent of valign="bottom" for a table within a DIV
using CSS?

I've found I can center a table of buttons in a DIV with
{margin-left:auto; margin-right:auto}. But I am unsure how to get this
table to sit at the bottom of the DIV.

Example code follows, or see
http://home.exetel.com.au/tas/valign/test01.html

p.s. If there is a better way than using a table to line up the button
images in CSS, I'd love to know.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test01</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body {
background-color:#ffcc00;
}
div#logo {
float:left;
height:91px;
width:135px;
background-color:#d0d2be;
}
div#sitemenu {
float:left;
height:91px;
width:407px;
background-color:#e0d2be;
}
div#sitemenu table {
margin-left:auto;
margin-right:auto;
}
div#sitemenu table td {
padding-left:10px;
padding-right:10px;
}
div#emailjoin {
float:left;
height:91px;
background-color:#f0d2be;
}
</style>
</head>

<body>

<div id="logo">
<p>logo</p>
</div>

<div id="sitemenu">
<table>
<tr>
<td>btn1</td>
<td>btn2</td>
<td>btn3</td>
</tr>
</table>
</div>

<div id="emailjoin">
<p>join our emailing list</p>
</div>

</body>
</html>

Jan 31 '06 #1
2 11974
Tasman wrote:

I've found I can center a table of buttons in a DIV with
{margin-left:auto; margin-right:auto}. But I am unsure how to get this
table to sit at the bottom of the DIV.

Add "height: 100%" to "div#sitemenu table".
Add "vertical-align: bottom" to "div#sitemenu table td".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jan 31 '06 #2

Jim,

I tested your solution in IE6 & FF1.5 on WinXP, and it works well.

Many thanks!

The updated sample file is available at:
http://home.exetel.com.au/tas/valign/test02.html

Tasman

Jim Moe wrote:
Tasman wrote:

I've found I can center a table of buttons in a DIV with
{margin-left:auto; margin-right:auto}. But I am unsure how to get this
table to sit at the bottom of the DIV.

Add "height: 100%" to "div#sitemenu table".
Add "vertical-align: bottom" to "div#sitemenu table td".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)


Feb 1 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Sean Berry | last post: by
2 posts views Thread by Sean Berry | last post: by
reply views Thread by ward | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.