Menu
So I have a div sandwich: three divs on top of one another. The slices of bread are both fixed-height due to background images. The meat is a 1px tall vertical repeater image. I need a way to expand the meat when overflow content from the top breadslice hits the bottom of the bottom breadslice. I figured a wrapper would be necessary for the meat and the bottom bread, but I'm not sure how to implement it.
Here's what I have thus far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#top {
position:relative;
height:100px;
background-color:pink;
width:460px;
word-wrap:break-word;
}
#wrapper {
position:relative;
}
#expand {
min-height:100%;
height:auto;
background-color:#EEEFFF;
}
#bottom {
height:100px;
background-color:#EEEEEE;
}
div.clear{
position:absolute;
width:100%;
clear:both;
height:1px;
overflow:hidden;
border:solid orange;
}
</style>
<title></title>
</head>
<body>
<div id="top">
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
</div>
<div id="wrapper">
<div id="expand"></div>
<div id="bottom"></div>
<div class="clear"></div>
</div>
</body>
</html>
I need a way to make top's content hit against the "clear" in the bottom wrapper and move the wrapper down.
604
Is this the effect you're after?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#top {
position:absolute;
height:100px;
background-color:pink;
width:460px;
top:0px;
}
#wrapper {
position:relative;
}
#expand {
position:absolute;
top:100px; /*height of top div*/
bottom:100px; /*height of bottom div*/
width:100%;
background-color:#cccFFF;
}
#bottom {
position:absolute;
bottom:0px;
height:100px;
width:560px;
background-color:#EEEEEE;
}
#text
{
position:relative;
}
</style>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="expand"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="text">
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
</div>
</div>
</body>
</html>
I think when you’ve got content overflowing a fixed height element, then the overflowing content won’t affect the layout of other elements.
Could you move your content out of the top bread slice, and into the meat? That will make the expanding happen.
If the content needs to appear in front of the top bread slice background, then you could use position: relative and a negative bottom margin to achieve that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#breadtop,
#breadbottom {
height: 100px;
background-color: #977;
}
#breadtop {
overflow: visible;
}
#meat {
background-color: #fbd;
}
#content {
position: relative;
top: -100px;
margin-bottom: -100px;
}
</style>
<title></title>
</head>
<body>
<div id="breadtop"></div>
<div id="meat">
<div id="content">
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
</div>
</div>
<div id="breadbottom"></div>
</body>
</html>
I like this question because it’s quite tricky, and because it contains the phrase “expandable meat div”.
38
(If you want example code I can come up with it, but It'll take me longer to answer)
What you may want to do is place your 3 slices in a div, and put your "top" content in the new div instead of the top slice. This way your new div's height will be determined by the content.
For the 3 slices, absolute position all of them. Put the top and bottom slices at the top and bottom of your new div using top:0 and bottom:0, respectively. For the middle meat slice, don't give it a height, but instead make it's top and bottom declarations equal to the height of your top and bottom slices. This way, the top/bottom of the meat will always be held X pixels away from the top/bottom of your new div, where X is the top/bottom slice's height.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
