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 Coder
    Join Date
    Mar 2009
    Location
    Phoenix Arizona
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question 100% Height Div Problem

    I'm having trouble making the left content div expand 100% down so my background image shows up... I have the div set to height: 100%; but it's not working, can anyone help? Thanks

    http://www.cruxcreations.net/aiga


    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Collins College AIGA Student Group</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 
    
    </head>
    
    <body>
    <div id="container"><img src="images/header.jpg" />
        <div id="content">
        <div id="contentleft">
        <img src="images/menu/shadow.jpg" id="menushadow" />
          <ul class="menu">
          	<li class="home"><a href="aboutus.php"></a></li>
            <li class="about"><a href="aboutus.php"></a></li>
            <li class="members"><a href="services.php"></a></li>
            <li class="projects"><a href="portfolio.php"></a></li>
            <li class="calendar"><a href="contact.php"></a></li>
            <li class="resources"><a href="portfolio.php"></a></li>
            <li class="contact"><a href="contact.php"></a></li>    
          </ul>
        <img src="images/menu/navbot.jpg" id="navbot" />
        </div>
        <div id="contentright"><p>test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></p></div>
        </div>
        <div id="footer"><p>footer</p></div>
    </div>
    </body>
    </html>

    CSS

    Code:
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	background-position: center 0px;
    	background-color: #003242;
    	background-repeat: no-repeat;
    	background-image: url(images/bg.gif);
    	margin: 0px;
    }
    #container {
    	width: 800px;
    	background-color: #FFF;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    #content {
    	background-color: #FFF;
    	padding: 0px;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    #contentleft {
    	float: left;
    	width: 183px;
    	height: 100%;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	background-color: #FFF;
    	background-image: url(images/menu/navbg.jpg);
    }
    #contentright {
    	float: left;
    	width: 617px;
    	background-color: #FFF;
    }
    
    
    
    .menu {
    	padding: 0;
    	width: 165px;
    	list-style: none;
    	background: #fff;
    	margin-top: -4px;
    }
    .menu li {
    	padding: 0;
    	margin: 0;
    	height: 48px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    .menu li a, .menu li a:visited {
    	display: block;
    	text-decoration: none;
    	text-indent: -1000px;
    	height: 48px;
    	background-repeat: no-repeat;
    }
    .home {background-image: url(images/menu/homeon.jpg);}
    .home a {background-image: url(images/menu/home.jpg);}
    .about {background-image: url(images/menu/abouton.jpg);}
    .about a {background-image: url(images/menu/about.jpg);}
    .members {background-image: url(images/menu/memberson.jpg);}
    .members a {background-image: url(images/menu/members.jpg);}
    .projects {background-image: url(images/menu/projectson.jpg);}
    .projects a {background-image: url(images/menu/projects.jpg);}
    .calendar {background-image: url(images/menu/calendaron.jpg);}
    .calendar a {background-image: url(images/menu/calendar.jpg);}
    .resources {background-image: url(images/menu/resourceson.jpg);}
    .resources a {background-image: url(images/menu/resources.jpg);}
    .contact {background-image: url(images/menu/contacton.jpg);}
    .contact a {background-image: url(images/menu/contact.jpg);}
    ul.menu li a:hover {background: none;}
    
    
    #menushadow {
    	border: none;
    	float: right;
    	margin-top: -4px;
    }
    
    #navbot {
    	border: none;
    	float: left;
    	margin-top: -16px;
    }
    
    
    #footer{
    	width: 800px;
    	float: left;
    	background-image: url(images/footer.jpg);
    	height: 150px;
    }

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    If I recall, a div will expand only to the height necessary to hold its content. To make it the full height of its containing div, you will need a bit of javascript.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You'd need to use faux columns.

    PS: to make a 2 column layout, you don't need to apply floats on both columns, take a look at http://bonrouge.com/2c-hf-fixed.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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