homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS replicate table behaviour
Vertical stretching of child elements
music_man

5+ Year Member



 
Msg#: 3682100 posted 4:01 am on Jun 24, 2008 (gmt 0)

Hi,

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>


 

appi2

5+ Year Member



 
Msg#: 3682100 posted 12:33 am on Jun 25, 2008 (gmt 0)

First, erm, if your using tabular data then use a table. Maybe your not using tabular data and your example just happens to look like a table.

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>


And it works in firefox opera and safari
Only problem is, IE doesn't support display table.

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.

music_man

5+ Year Member



 
Msg#: 3682100 posted 1:14 am on Jun 25, 2008 (gmt 0)

Hi,

Thanks for your reply. Yeah it's to be a top navigation bar. I wonder if there is a hack for ie.

appi2

5+ Year Member



 
Msg#: 3682100 posted 1:57 am on Jun 25, 2008 (gmt 0)

Gah nobody likes my table method ;)

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>


music_man

5+ Year Member



 
Msg#: 3682100 posted 9:47 pm on Jul 1, 2008 (gmt 0)

Works a treat! Any tips on how to make it work for IE 6? Works for IE 7.
Thanks.

appi2

5+ Year Member



 
Msg#: 3682100 posted 10:34 pm on Jul 1, 2008 (gmt 0)

It should work in IE6, I've tested that exmaple above in a virtual Machine running XP and default IE6. If your having problems with IE6, I'd be interested to know what version etc.

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>.

music_man

5+ Year Member



 
Msg#: 3682100 posted 11:12 pm on Jul 1, 2008 (gmt 0)

I've changed it to a list:


#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>

appi2

5+ Year Member



 
Msg#: 3682100 posted 4:51 am on Jul 2, 2008 (gmt 0)

you can't move the goal posts mid game, not fair ;)

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+

music_man

5+ Year Member



 
Msg#: 3682100 posted 5:02 am on Jul 2, 2008 (gmt 0)

There it goes!

Thanks very much for your help!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved