Making two parallel elements match each-other in height

Tristan Perry · July 02, 2005, 07:19:41 AM

Hello,
I'm working on a new design for my website. I've got everything working, apart from adding a shadow to the right-hand side of the design. At the moment I am trying to put the main design into one "main" div, and then create another div, "shadowright", which would be the div controlling the shadow.

I've floated the two divs ("main" and "shadowright") so they are vertically-parallel although I can't get the shadowright div to match the height of the main div. I know that in CSS, making this happen is nigh-on impossible, although I thought I'd ask here anyway, seeing as though everyone here seems to be really clever

The design I'm making is fluid (In both width and height) and so setting a height in pixels for the shadow <div> wouldn't work. Below is the relevant parts of the code I am using at the moment. If anyone can find another way to get the shadow to work, I'd appreciate it:

Page

Code Select


<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
	<div id="main">
		<div id="header">
			<!-- Header -->
		</div>
		
		<div id="horizlinks">
			<!-- Some links -->
		</div>
		
		<div id="content">
		  <table width="100%"  border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td id="vertlinks">
			  <!-- Some more links -->
				</td>
				
              <td id="text">
			    <h1><!-- Title for content --></h1>
				<!-- Content -->
			  </td>
            </tr>
          </table>
	  </div>
		
		<div id="footer">
			<!-- Copyright Stuff -->
		</div>

		
		<div id="shadow">
			<!-- Bottom Shadow - This part works fine, it's a horizontal shadow -->
		</div>
	</div>
	
	<div id="shadowright">
		<!-- This is the element I want to match the height of the <div id="main"> element -->
	</div>
</div>
</body>

CSS

Code Select

/* The container element controls the width and position of everything on the page */
#container {
	width: 76%;
	min-width: 700px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Shadow-related stuff */
#shadow {
	background-image: url(Shadow_1.gif);
	background-repeat: repeat-x;
	position: relative;
	width: 100%;
	height: 9px;
	top: -4px;
	left: 5px;
}

#main {
	float: left;
	width: 97%;
}

#shadowright {
	background-image: url(Shadow_4.gif);
	background-repeat: repeat-y;
	width: 2%;
	float: right;
	position: relative;
	left: -9px;
}

This design isn't really something I'm showing to lots of people, which is why I have only shown parts of the coding.
Thanks for your time,
Tau Online

Tim · July 02, 2005, 10:06:43 AM

again:

Faux Columns to the rescue

Tristan Perry · July 02, 2005, 10:17:33 AM

Quote from: Tim on July 02, 2005, 10:06:43 AM
again:

Faux Columns to the rescue

Thanks, I meant to put this in my first post although forgotten.. I know of this hack, although it won't work here because the width of this design is fluid. I want the shadow to be on the right of the design, although this solution doesn't help it.. I think. Unless there's a way to position a background?

Tim · July 02, 2005, 01:35:10 PM

Liquid Faux Columns

Tristan Perry · July 03, 2005, 05:39:01 AM

Quote from: Tim on July 02, 2005, 01:35:10 PM
Liquid Faux Columns

Gah! I really suck at CSS.. Thanks for your help

I'll be sure to look into that article (And use Google before posting here again!)

News:

Making two parallel elements match each-other in height

Tristan Perry

Tim

Tristan Perry

Tim

Tristan Perry