CSS: Layer Height = Other Layer's Height?

**Fotinakis** · Sep 12, 2004 11:45

Hello all.

I seems that no one read/responded to my second question in this thread, so I decided to ask it in a new thread as a separate question.

Is there a way to specify a layer's height by referring to another layer's height?

Code:

#main {
 	position: absolute;
 	width: 100px;
 	left: 0;
 	background-color: blue;
 }
 
 #left {
 	position: absolute;
 	width: 100px;
 	left: 100px;
 	background-color: red;
 	height: *******;	 /* Is there something I can put here */
 				 /* to refer to the main layer's height? */
 }

Is there anyway to do this?

Thanks!
- Fotinakis

**Paul O'B** · Sep 12, 2004 14:28

Hi,

No there isn't a way to do this you will either need to use a table to create equalising columns or use one of the techniques used in my 3 column demo (sticky thread) that uses various complicated techniques to achieve the effect.

Because your element are absolutely placed then they can have no effect on other content anyway.

Here is an example using one of the techniques in my demo where you can find an explanation of how it is achieved. However its a little complicated and dimensions are critical.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#wrapper {
 border: 1px solid #000000;
 width:201px;
background:yellow;}
#wrapper p {margin:0px;}
#right {
 border-left: 1px solid #000000;
 width:100px;
 background:red;
 margin-left:100px;
}
#left {
 width: 100px;
 float: left;
 margin-left:-100px;
 position:relative;
 display:inline;/*ie fix*/
 margin-right:1px;
}
.clearer{
 height:1px;
 overflow:hidden;
 margin-top:-1px;
 clear:both;
}
* html #left {margin-right:-3px;}
/* commented backslash mac hiding hack  \*/ 
* html #outer {height:1%}
* html #right {height:1%;}
/* end hack */ 
</style>
</head>
<body>
<div id="wrapper"> 
  <div id="right"> 
	<div id="left"> 
	  <p>left content goes here</p>
	  <p>left</p>
	  <p>left</p>
	  <p>left</p>
	  <p> left</p>
	  <p>left</p>
	  <p>&nbsp;</p>
	</div>
	<p>right content goes here </p>
	<p> right content</p>
	<p>right</p>
	<br class="clearer" />
  </div>
</div>
</body>
</html>

Hope it helps anyway

Paul

**Fotinakis** · Sep 12, 2004 20:38

I have experimented with putting them in a table, but I can't get it to work correctly. Can you give an example?

Also, it doesn't matter what the positioning of it is, as long as you can get both of them next to each other (left and right).

- Fotinakis

**Paul O'B** · Sep 13, 2004 13:23

Hmmm,

I must be misunderstanding you because this is quite straightforward in a table

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
table{width:200px}
td {border:1px solid #000;vertical-align:top}
td#right {
  width: 100px;
  background-color: blue;
}
 
td#left {
  width: 100px;
  background-color: red;
 }

</style>
</head>
<body>
<table cellspacing="10" cellpadding="0">
  <tr>
	<td id="left"><p>Some text to expand the container : Some text to expand the container : 
 Some text to expand the container : </p>
 <p>Some text to expand the container : Some text to expand the container : 
 Some text to expand the container : </p>
 <p>Some text to expand the container : Some text to expand the container : 
 Some text to expand the container : </p></td>
	<td id="right"><p>Some text to expand the container : Some text to expand the container : 
 Some text to expand the container : </p></td>
  </tr>
</table>
</body>
</html>

Hope that was what you meant.

Paul

**Fotinakis** · Sep 13, 2004 17:03

OK....it was a misunderstanding on both of our parts.

I misunderstood what you meant by doing it "inside a table." If it was just different cell alignment, I could have done that.

But my mind was thinking other things, like using the table as a reference point for positioning blah blah blah...it doesn't matter. The fact of the matter is, I think you interpreted correctly in your first post when you said "there isn't a way to do this".

I have avoided using tables for this, because now that I see the full potential of CSS and how it should be really used for separating the content from the design (and how you can position down to the pixel); I am reluctant to use tables again.

Basically, and more simply for those who have read this and don't understand, I want two content areas (#left and #right) to be next to each other and always be the same height, no matter what the content of the right content area may be. Does this make sense?

I hope so....

- Fotinakis

**Paul O'B** · Sep 13, 2004 17:06

Hi,

If you check out my first post with the css version then you will see that it can be done

(allbeit a little more complicated than seems necessary

Paul

**Fotinakis** · Sep 13, 2004 17:28

I guess I'll do that then. Thanks for the help <cough>only person that did!</cough>

, and I'll post back if I get it working.

Thanks!
- Fotinakis

User Tag List

Thread: CSS: Layer Height = Other Layer's Height?

Thread Tools

Display

CSS: Layer Height = Other Layer's Height?

Bookmarks

Bookmarks

Posting Permissions