...

View Full Version : Child div stretching to fit parent div



pinkshiro
11-30-2006, 11:48 PM
Is it possible to make a child div stretch to fill up the remainder of it's parent div if the parent div's height is set to be liquid?

I want the parent div to contain three rows (divs) Top and bottom div are fixed height, middle div is fluid.


Possible?

pinkshiro
12-01-2006, 04:14 AM
not sure if im describing this well enough cause no ones replying :)

here's a pic of the website im trying to create. almost there....

http://i55.photobucket.com/albums/g145/raffles816/flight.jpg

see the latest news block? I'm trying to get that particular block to be liquid i.e. stretch to fill column if viewed in higher resolution. Can't seem to find anything on the net regarding this...

1212jtraceur
12-01-2006, 04:23 AM
I think that if you apply position: relative; to the parent div, and set the top and bottom of the middle div so that it won't overlap the other 2, it will work as you intend. Your code would help tremendously, however...

pinkshiro
12-01-2006, 04:51 AM
i have tried to refrain from showing code since it's quite ugly and messy. But if it'll get us on the right track, here goes nothing...

a quick explaination to my structure:

Page wrapped in div#threecolwrapper.

then comes div#hometopblock, which holds the banner/navigation

then comes div#leftblock, div#homeright div#homemiddleblock, which are floated to sit next to each other. div#homeright is the culprit holding the stuff down the righthand side.

XHTML
---------------------------------

<div id="threecolwrapper">
<div id="top"></div>

<!--TOP BANNER-->

<div id="hometopblock">
<div id="logo"><a href="index.html"><img src="images/logo.gif" width="209" height="157" /></a></div>
<div id="banner">
<img src="images/banner.jpg" width="574" height="126" /> </div>
<div id="navigation">
<ul>
<li><a href="bookings.html"
onmouseover="image1.src='images/link1over.jpg';"
onmouseout="image1.src='images/link1.jpg';"
onmousedown="image1.src='images/link1over.jpg';"
onmouseup="image1.src='images/link1over.jpg';">
<img name="image1" src="images/link1.jpg" border="0" alt="" /></a></li>
<li><a href="packages.html"
onmouseover="image2.src='images/link2over.jpg';"
onmouseout="image2.src='images/link2.jpg';"
onmousedown="image2.src='images/link2over.jpg';"
onmouseup="image2.src='images/link2over.jpg';">
<img name="image2" src="images/link2.jpg" border="0" alt="" /></a></li>
<li><a href="franchise.html"
onmouseover="image3.src='images/link3over.jpg';"
onmouseout="image3.src='images/link3.jpg';"
onmousedown="image3.src='images/link3over.jpg';"
onmouseup="image3.src='images/link3over.jpg';">
<img name="image3" src="images/link3.jpg" border="0" alt="" /></a></li>
<li><a href="gallery.html"
onmouseover="image4.src='images/link4over.jpg';"
onmouseout="image4.src='images/link4.jpg';"
onmousedown="image4.src='images/link4over.jpg';"
onmouseup="image4.src='images/link4over.jpg';">
<img name="image4" src="images/link4.jpg" border="0" alt="" /></a></li>
<li><a href="about.html"
onmouseover="image5.src='images/link5over.jpg';"
onmouseout="image5.src='images/link5.jpg';"
onmousedown="image5.src='images/link5over.jpg';"
onmouseup="image5.src='images/link5over.jpg';">
<img name="image5" src="images/link5.jpg" border="0" alt="" /></a></li>
<li><a href="contact.html"
onmouseover="image6.src='images/link6over.jpg';"
onmouseout="image6.src='images/link6.jpg';"
onmousedown="image6.src='images/link6over.jpg';"
onmouseup="image6.src='images/link6over.jpg';">
<img name="image6" src="images/link6.jpg" border="0" alt="" /></a></li>
</ul>
</div>
</div>

<div style="clear:both;"></div>

<!--START CONTENT DIV'S-->

<!--START LEFT COLUMN-->

<div id="leftblock">
<div id="cockpit">
<img src="images/cockpit.jpg" width="209" height="96" /> </div>
</div>

<!--END LEFT COLUMN-->

<!--START RIGHT COLUMN-->

<div id="homeright">
<div id="homeflightexp">
<img src="images/flightexperience.jpg" width="161" height="116" /> </div>
<div id="homelatestnews">
<img src="images/latestnewsheader.jpg" width="161" height="26" />
<div id="latestnewscontentbg">
<div id="latestnewscontent">
<div class="latestnewsdate">
Nov 06 </div>
<div class="latestnewstitle">
Christchurch Flight Simulator has moved </div>
<div class="latestnewstext">
We have relocated to a new site within Northlands Mall. Enter the mall at the Countdown entrance and we are next to Bakers Delight. </div>
<div class="latestnewsdate">
Nov 06 </div>
<div class="latestnewstitle">
Christchurch Flight Simulator has moved </div>
<div class="latestnewstext">
We have relocated to a new site within Northlands Mall. Enter the mall at the Countdown entrance and we are next to Bakers Delight. </div>
</div>
</div>
<img src="images/latestnewsfooter.jpg" width="161" height="26" /> </div>
<div id="homerightbottom">
<div id="rightbottom1">
<img src="images/bottomimage1.jpg" width="161" height="75" /> </div>
<div id="rightbottom2">
<img src="images/bottomimage2.jpg" width="161" height="75" /> </div>
</div>
</div>

<!--END RIGHT COLUMN-->

<!--START MIDDLE COLUMN-->

<div id="homemiddleblock">
<img src="images/homecontent.jpg" width="401" height="365" /> </div>

<!--END MIDDLE COLUMN-->

<!--END CONTENT DIVS-->

<div style="clear:both;">&nbsp;</div>
<div id="threecolfooter">
<div id="footerleft"><a href="bookings.html">Bookings</a> | <a href="packages.html">Packages</a> | <a href="franchise.html">Franchise Information</a> | <a href="gallery.html">Gallery</a> | <a href="about.html">About Us</a> | <a href="contact.html">Contact Us</a></div>
<div id="footerright"> &copy; 2006 FlightExperience. All Rights Reserved.</div>
</div>
</div>


followed by css.


html,body {
height: 100%;
width: 100%;
}

html,body {
margin: 0;
padding: 0;
}

body {
text-align: center;
background-color:#a1a1a1;
}

div {
color:#666666;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

div#twocolwrapper {
position:relative;
margin-left: auto;
margin-right: auto;
width:792px;
text-align:left;
padding:0px;
background-color:#FFFFFF;
min-height: 100%;
height: 100%;
background-image:url(images/background.gif);
background-repeat:repeat-y;
}

div#threecolwrapper {
position:relative;
margin-left: auto;
margin-right: auto;
width:792px;
text-align:left;
padding:0px;
background-color:#FFFFFF;
min-height: 100%;
height: 100%;
background-image:url(images/homebackground.gif);
background-repeat:repeat-y;
}

html>body #threecolwrapper {
height: auto;
}

html>body #twocolwrapper {
height: auto;
}

img {
border:0px;
display:block;
}

img.alt {
border:0px;
display:inline;
padding-bottom:5px;
}

div#top {
background-color:#a1a1a1;
height:10px;
border-bottom:3px #ffffff solid;
}

div.generalcontent {
margin:10px auto 0 auto;
width:540px;
font-size:12px;
}

div#title {
margin:0 auto 0 auto;
width:540px;
font-size:12px;
padding-top:15px;
}

/*RIGHT HAND SIDE CSS*/

div#rightblock {
width:404px;
float:right;
}

div#middleblock {
width:574px;
margin:0 auto 0 auto;
float:right;
padding-bottom:50px;
}

li {
float:left;
}

ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
width:574px;
}

div#navigation {
height:28px;
padding:0px;
border-top:3px #ffffff solid;
border-bottom:3px #ffffff solid;
width:574px;
float:right;
border-right:3px solid #fff;
}

div#banner {
width:574px;
float:right;
border-right:3px solid #fff;
}

div#hometopblock {
background-color:#ffffff;
width:792px;

}

/*LEFT HAND SIDE CSS*/

div#leftblock {
width:206px;
float:left;
background-color:#ef1b27;
border-left:3px #ffffff solid;

}

div#logo {
border:3px #ffffff solid;
border-top:0;
width:209px;
height:157px;
float:left;
}

div#cockpit {
border-bottom:3px #ffffff solid;
width:209px;
height:96px;
}

div#book {
border-bottom:3px #ffffff solid;
width:209px;
height:223px;
}

div#franchise {
border-bottom:3px #ffffff solid;
width:209px;
height:110px;
}

/*Footer*/

div#footer {
position: absolute;
bottom:0px;
background-color:#a1a1a1;
height:25px;
width:792px;
border-top:3px #fff solid;
}

div#threecolfooter {
position: absolute;
bottom:0px;
background-color:#a1a1a1;
height:25px;
width:792px;
background-image:url(images/footerbg.gif);
background-position:top;
background-repeat:no-repeat;
padding-top:5px;
}

div#footerleft {
width:396px;
float:left;
height: 15px;
color:#000;
background-color:transparent;
}

div#footerleft a {
color:#000000;
text-decoration:none;
}

div#footerleft a:hover {
color:#000000;
text-decoration:underline;
}

div#footerright {
width:390px;
float:right;
text-align:right;
height: 15px;
color:#000;
background-color:transparent;
}

/*Home Page*/

div#homemiddleblock {
width:404px;
float:right;
}


div#homeright {
padding:0px;
margin-top:0px;
float:right;
width:170px;
background-color:#a1a1a1;
}

div#homeflightexp {
width:161px;
border:3px #fff solid;
margin:3px 0px 3px 3px;
}

div#homecontent {
width:406px;
}

div#homerightbottom {
position:relative;
bottom:0;
width:167px;
margin:3px 0px 3px 3px;
}

div#rightbottom1 {
border:3px #fff solid;
}

div#rightbottom2 {
border:3px #fff solid;
border-top:0;
border-bottom:0;
}

div#homelatestnews {
width:161px;
border:3px #fff solid;
margin-left:3px;
}

div#latestnewscontentbg {
background-image:url(images/latestnewsbg.jpg);
background-repeat:no-repeat;
}

div#latestnewscontent {
overflow:auto;
height:200px;
background-color:transparent;
}

div.latestnewsdate {
padding: 5px 0px 2px 5px;
font-weight:bold;
color:#666666;
}

div.latestnewstitle {
font-weight:bold;
padding: 0px 5px 2px 5px;
color:#333333;
}

div.latestnewstext {
padding: 0px 5px 2px 5px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum