Forum Moderators: not2easy
I would like to have the ability to have a child element change its height and all the other child elements have their height adjusted too.
This functionality can be found in tables. I've attached some of my working; the last of which is with a table showing the desired effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#nav li {
float: left;
height: 30px;
width: 100px;
text-align: center;
}#nav li a {
font-size: 10px;
font-family: tahoma;
color: #fff;
text-transform: uppercase;
font-weight: bold;
display: block;
padding-top: 3px;
text-decoration: none;
}
#nav {
margin: 0;
padding: 0;
width: 600px;
background: blue;
height: 30px;
list-style: none;
}#nav #selected {
background: red;
}#nav2{
width: 600px;
background: yellow;
overflow:hidden;
}
#nav2:after{
content: ".";
display: none;
}
#nav2 div{
float: left;
width: 100px;
}#nav2 div #selected {
background: orange;
}#nav2 div a {
display: block;
}#nav3
{
width: 600px;
background: yellow;
border: none;
}
#nav3 td
{
width: 100px;
}#nav3 #selected
{
background: orange;
}</style>
</head>
<body><ul id="nav">
<li id="selected"><a href="#">Test Test Test Test </a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul><br />
<div id="nav2">
<div><a href="#">Test Test Test Test Test Test Test Test Test Test</a></div>
<div><a href="#" id="selected">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
</div><br />
<table cellspacing="0" cellpadding="0" id="nav3">
<tr>
<td valign="top"><a href="#">Test Test Test Test</a></td>
<td valign="top" id="selected"><a href="#">Test</a></td>
<td valign="top"><a href="#">Test</a></td>
<td valign="top"><a href="#">Test</a></td>
<td valign="top"><a href="#">Test</a></td>
<td valign="top"><a href="#">Test</a></td>
</tr></table>
</body>
</html>
You can use
display:table;
display:table-row;
display:table-cell;
Then you get the auto height problem solved.
eg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#divtable {
display:table;
width: 600px;
background: yellow;
}
.divrow {display:table-row;}
.divrow div {
display:table-cell;
width: 100px;
}#selected {
background: orange;
}
</style>
</head><body>
<div id="divtable">
<div class="divrow">
<div><a href="#">Test Test Test Test Test Test Test Test Test Test</a></div>
<div id="selected"><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
</div>
</div>
</body>
</html>
I did a (silly(but works) work around) post on using display table in a 3 coll layout [webmasterworld.com], everybody loved it, they were just to shy to say so ;)
ps warning about that three coll example, Firefox3 needs a fix. it should have display:table-row; applied to an outer div that surrounds the three colums.
Thanks for your reply. Yeah it's to be a top navigation bar. I wonder if there is a hack for ie.
ok how about
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">#nav {
background: yellow;
width: 640px;
overflow: hidden;
}#nav div {
float:left;
display:block;
width: 100px;
padding-bottom: 32768px;
margin-bottom: -32768px;}
#selected {
background: orange;
}
</style>
</head><body>
<div id="nav">
<div><a href="#">Test Test Test Test Test Test Test Test Test Test</a></div>
<div id="selected"><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
<div><a href="#">Test</a></div>
</div>
</body>
</html>
There are a couple of things you should watch out for, you wont be able to set a bottom border on the #selected div and you can't use anchors inside the <div id="nav">...</div>.
#navigation ul
{
margin: 0;
padding:0;
background: #759dd5;
width: 100%;
overflow: hidden;
}
#navigation ul li
{
float:left;
list-style: none;
padding-bottom: 5px;
}
#navigation a
{
border-right: 1px solid #fff;
line-height: 140%;
display: block;
width: 130px;
padding: 5px 0 100px 0;
margin: 0 0 -100px 0;
text-align: center;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
color: #fff;
text-decoration: none;
font-family: "Trebuchet MS", verdana, sans-serif;
}.current_page_item a, #navigation a:hover
{
background: #c65528;
}
<div id="navigation">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="current_page_item"><a href="#">Item 3</a></li>
</ul>
</div>
Presuming your links actually are something like (notice the first link)
<div id="navigation">
<ul>
<li><a href="#">A long link that goes onto another line</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="current_page_item"><a href="#">Item 3</a></li>
</ul>
</div>
and not what you posted above
then add
padding: 0 0 100px 0;
margin: 0 0 -100px 0;
to
#navigation ul li{}
It then seems (make sure you check) to work in Firefox 2+ Opera 9.5 Safari3.1 IE6+ & Konqueror 3.5+
Thanks very much for your help!
