Hi
I am trying to build a page with the following in it:
Already have the following:
- one div for page to center the whole page with width 809px
- inside
<div class="page">
is the following:<div class="header">
<div class="container">
(container for content stuff)<div class="footer">
What I am struggling with:
<div class="container">
should contain the following:- leftmost
<div class="leftShadow">
with 100% height to container, with left shadow image as background for<div class="leftShadow">
- second to left
<div class="custom_content">
with 100% height to container (will contain content of page - second to right
<div class="sidebar_right">
with 100% height to container (will contain extra links) - rightmost
<div class="rightShadow">
with 100% height to container, with right shadow image as background for<div class="rightShadow">
- leftmost
So to summarise:
<div class="page">
<div class="header">header image</div>
<div class="container">
<div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
<div class="custom_content">(this is where the content would be)</div>
<div class="sidebar_right">(some other links)</div>
<div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>
So what is supposed to happen is, when either custom_content
or sidebar_right
div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.