SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: Layer Height = Other Layer's Height?

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •