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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    height:100% problem

    I've been searching all day about how to get 3 elements to have 100% height so that they fill up the browser window all the time. I've got a blue element on the left side of the page, a white element in the middle of the page and another blue element on the right side of the page.
    http://members.iinet.net.au/~awcabre...al/floats.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description"
        content="2 bays tackle home page" />
        <meta name="keywords"
        content="2,bays,tackle,bay,melbourne,fishing,products,freshwater,saltwater,distributor" />
    	<link rel="stylesheet" type="text/css" href="../style.css" />
    	<title>2Bays Tackle</title>
    </head>
    
    <body>
    
    <div class="header">
    	<img src="../images/header.jpg" alt="2Bays Tackle" />
    </div>
    <div class="gradient_black">
    </div>
    <div class="left_blue">
    	<div class="productmenu">
    	<span class="navheading"><a href="../anglerspal/anglerspal.html">Anglers Pal</a></span><br />
        <br />
        <br />
    	<a href="../anglerspal/rigs.html">Rigs</a><br />
    
    	<a href="../anglerspal/jigs.html">Jigs</a><br />
    	<a href="../anglerspal/jigheads.html">Jig Heads</a><br />
    	<a href="../anglerspal/threads.html">Threads</a><br />
    	<a href="../anglerspal/lures.html">Lures</a><br />
    	<a href="../anglerspal/hooks.html">Hooks</a><br />
    	<a href="../anglerspal/swivels.html">Swivels</a><br />
    
    	<a href="../anglerspal/rings.html">Rings</a><br />
    	<a href="../anglerspal/split.html">Split Shot Sinkers</a><br />
    	<a href="../anglerspal/spreaders.html">Spreaders</a><br />
    	<a href="../anglerspal/floats.html">Floats</a><br />
    	<a href="../anglerspal/light.html">Light stikes / Luminous Beads / Luminous Pipe</a><br />
    	<a href="../anglerspal/pe.html">PE Braided Lines / Wind on leaders</a><br />
    
    	<a href="../anglerspal/wire.html">Wire</a><br />
    	<a href="../anglerspal/bells.html">Bells</a><br />
    	<a href="../anglerspal/clips.html">Clips</a><br />
    	<a href="../anglerspal/pliers.html">Pliers</a><br />
    	<a href="../anglerspal/line.html">Line Reels</a><br />
    	<a href="../anglerspal/general.html">General</a><br />
    
        <br />
        <br />
        <span class="navheading"><a href="../prohunter/prohunter.html">Pro Hunter</a></span><br /><br />
    	<a href="../prohunter/tools.html">Tools</a><br />
    	<a href="../prohunter/gloves.html">Fishing Gloves, Gimbel Belt & Tool Pouch</a><br />
    	<a href="../prohunter/spoons.html">Spoons and Spinners</a><br />
    
        <br />
        <br />
        <span class="navheading"><a href="../technic/technic.html">Technic</a></span><br />
        <br />
    	<a href="../technic/ko.html">KO Jack Minnow / Catch Minnow</a><br />
    	<a href="../technic/pop.html">Pop Gator / Pop Monster</a><br />
    	<a href="../technic/scout.html">Scout Minnow / Prowl Minnow</a><br />
    
    	<a href="../technic/killer.html">Killer Popper / GT Monster</a><br />
    	<a href="../technic/crystal.html">Crystal Killer / GT Minnow</a><br />
    	<a href="../technic/heavy.html">Heavy Duty Pliers & Reel Bags</a><br />
        <br />
        <br />
    	<span class="navheading"><a href="../nikko/nikko.html">Nikko</a></span><br /><br />
    
    	<a href="../nikko/line.html">Line</a><br />
    	</div>
    </div>
    <div class="white">
    	<div class="content">
    <h1>Floats</h1>
    <br />
    <br />
    <h3>Angler's Pal GTF Styrene Float</h3>
    <br />
    <p style="text-align:center">
    
    <img src="../anglerspal/images/apgtf0.jpg"/>
    <br />
    <ul>
    	<li>Angler's Pal GTF styrene float</li>
        <li>Size #0</li>
        <li>5 pieces per packet</li>
        <li>Minimum order quantity = 10 packets of each size</li>
    </ul>
    <br />
    
    <hr />
    </p>
    
    <p style="text-align:center">
    <img src="../anglerspal/images/apgtf5.jpg"/>
    <br />
    <ul>
    	<li>Angler's Pal GTF styrene float</li>
        <li>Size #5</li>
        <li>2 pieces per packet</li>
        <li>Minimum order quantity = 10 packets of each size</li>
    
    </ul>
    <br />
    <hr />
    </p>
    	</div>
    </div>
    
    <div class="home">
    	<a href="../index.html"><img src="../images/home.gif" alt="Home"
        onmouseover="this.src = '../images/ohome.gif';"
        onmouseout="this.src = '../images/home.gif';" /></a>
        <img src="../images/ohome.gif" style="display: none" />
    </div>
    <div class="aboutus">
    	<a href="../aboutus.html"><img src="../images/aboutus.gif" alt="About us"
        onmouseover="this.src = '../images/oaboutus.gif';"
        onmouseout="this.src = '../images/aboutus.gif';" /></a>
    
        <img src="../images/oaboutus.gif" style="display: none" />
    </div>
    <div class="productlist">
    	<a href="../productlist.html"><img src="../images/productlist.gif" alt="Product list"
        onmouseover="this.src = '../images/oproductlist.gif';"
        onmouseout="this.src = '../images/productlist.gif';" /></a>
        <img src="../images/oproductlist.gif" style="display: none" />
    </div>
    <div class="contactus">
    	<a href="../contactus.html"><img src="../images/contactus.gif" alt="Contact us"
        onmouseover="this.src = '../images/ocontactus.gif';"
        onmouseout="this.src = '../images/contactus.gif';" /></a>
        <img src="../images/ocontactus.gif" style="display: none" />
    </div>
    
    <div class="right_blue">
    
    </div>
    
    </body>
    </html>
    CSS file here

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html{
    	height:100%;
    }
    
    body{
    	height:100%;
    	background-color:#DEDEDE;
    	margin:0;
    	padding:0;
    } 
    
    img{border-style:none;}
    
    div{
    	height:100%;
    	position:absolute;
    }
    
    /*Solids*/
    div.gradient_black{
    	width:923px;
    	height:43px;
    	left:0px;
    	top:120px;
    	background-color:#000;
    }
    
    div.content{
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	text-align:left;
    	width:585px;
    	min-height:100%;
    	height:auto;
    	margin-left:30px;
    	margin-right:30px;
    	margin-top:30px;
    	padding-left:30px;
    	padding-right:30px;
    	padding-top:30px;
    	background-color:#FFF;
    	left:-30px;
    	top:-30px;
    }
    
    div.white{
    	width:645px;
    	height:100%;
    	left:136px;
    	top:163px;
    	background-color:#FFF;
    }
    
    div.left_blue{
    	width:136px;
    	min-height:100%;
    	height:100%;
    	left:0px;
    	top:163px;
    	background-color:#0e7ba9;
    	position:relative;
    }
    
    div.right_blue{
    	width:142px;
    	height:100%;
    	left:781px;
    	top:163px;
    	background-color:#0e7ba9;
    }
    
    /*Navigation*/
    div.home{
    	width:100px;
    	height:38px;
    	left:200px;
    	top:122px;
    }
    
    div.aboutus{
    	width:100px;
    	height:38px;
    	left:320px;
    	top:122px;
    }
    
    div.productlist{
    	width:130px;
    	height:38px;
    	left:440px;
    	top:122px;
    }
    
    div.contactus{
    	width:130px;
    	height:38px;
    	left:590px;
    	top:122px;
    }
    
    
    /*Images*/
    div.header{
    	width:923px;
    	height:120px;
    	left:0px;
    	top:0px;
    }
    
    /*Text*/
    div.productmenu{
    	width:136px;
    	text-align:center;
    	font-size:8pt;
    	font-family:Arial, Helvetica, sans-serif;
    	margin-top:5px;
    }
    
    .navheading{
    	font-size:9pt;
    	font-family:Verdana, Geneva, sans-serif;
    	font-weight:bold;
    }
    
    .bold{
    	font-weight:bold;
    }
    
    .boldheading{
    	font-weight:bold;
    	font-size:14px;
    }
    
    /*Links*/
    a {
    	text-decoration:none;
    }
    
    a:link {
    	color:#000;
    }
    
    a:visited {
    	color:#000;
    }
    
    a:active {
    	color:#FFF;
    }
    I've tried everything I know of to try and get this to work, moved the order of the css file around, moved the div's around in the code. Run the page and the css file through the w3c validator, and there are a few small issues like alt tags not included and ampersands used instead of code, but that's easy to fix.

    I also quickly made a test html and css file so that I could see how 2 div's both with height:100% acted if they had different top and left values. What happend was they both had the same height, but only the one with a lower position actually reached 100% down the page. Does this mean it's not possible to have an element that contains both "top:30px; height:100%;"?

    It's driving me crazy and I've run out of ideas. I even tried to use no top value at all and just use a z-index value to position them behind the header image etc.
    Last edited by intense; 06-11-2009 at 02:37 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You'd need to use faux columns
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    intense (06-11-2009)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    You'd need to use faux columns
    Thanks heaps. You've just made my day, I can't believe I didn't think of something so simple like this.


  •  

    Posting Permissions

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