Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Child div stretching to fit parent div

    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?

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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....



    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...

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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
    ---------------------------------
    Code:
    <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.

    Code:
    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;
    	}


  •  

    Posting Permissions

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