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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Divs not expanding to 100% height and other issues

    Hi all

    There's obviously something I'm missing but I can't see it!

    The website is here: www.scaldbeckhouse.com/index.php

    As you can see, the sticky footer works and the left 'navigation' column scales the page if it resizes without problem. My issue is getting the main content div (#right-content) to expand to fill the space down to the footer too. It must be simple and I must just be missing it.

    Anyone help?!

    CSS code
    Code:
    /* STYLESHEET FOR STANDARD SITE */
    
    @charset "utf-8";
    
    
    html, body {
    	margin: 0px;
    	padding: 0px;
    	background: url('i/layout/bg.gif') fixed;
    	min-height: 100%;
    	height: 100% !important;
    }
    
    p {
    	margin-top: 0px;
    }
    
    #headercontainer {
    	width: 100%;
    	height: 92px;
    	background: url('i/layout/hdr_bg.gif');
    }
    
    #header {
    	margin: 0px auto 0px auto;
    	width: 915px;
    	height: 92px;
    	text-align: right;
    	color: #FFF;
    	font-family: "Times New Roman", Times, serif;
    	font-size: 20px;
    	position: relative;
    }
    
    #contact {
    	position: absolute;
    	top: 25%;
    	right: 0px;
    }
    
    #contentwrapper {
    	width: 915px;
    	margin: 0px auto 0px auto;
    	height: 100%;
    	min-height: 100%;
    	overflow: auto;
        padding-bottom: 50px;
    	overflow: hidden;
        height: 100%;
    	clear: both;
    }
    
    #footer {
    	width: 885px;
    	margin: 0px auto 0px auto;
    	background-color: #333;
    	height: 50px;
    	margin-top: -80px;
    	position: relative;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	padding: 15px;
    	color: #FFF;
    	clear: both;
    }
    
    #wrapper {
    	height: 100%;
        height: auto !important;
        min-height: 100%;
    	padding: 0px;
    	clear: both;
    	position: relative;
    }
    
    #left-sidebar {
        width: 140px;
        float: left;
        padding: 0px;
    	background-color: rgba(112,112,112,0.7);
    	text-align: center;
    	color: #FFF;
    	font-family: "Times New Roman", Times, serif;
    	padding: 20px 0px 20px 0px;
    	line-height: 24px;
    	bottom: 0px;
    	top: 92px;
    	position: absolute;
    }
    
    #right-content {
        width: 735px;
        float: right;
        padding: 20px;
    	background-color: #FFFFFF;
    	bottom: 80px;
    	height: auto;
    }
    
    #right-tile {
    	width: 775px;
    	float: right;
    	padding: 0px;
    }

    HTML code
    Code:
    <body>
    <div id="wrapper">
    
    <!-- HEADER -->
    <div id="headercontainer">
      <div id="header">
        <a href="index.php"><img src="i/layout/logo.png" style="float: left; border: none;" /></a>
      <div id="contact">(01263) 123 456<br /> <script language="JavaScript" type="text/javascript">
    	<!--
    	// TO AVOID SPAM MAIL, HIDE EMAIL FROM BOTS
    	var a = "info"
    	var b = "scaldbeckhouse"
    		document.write(a + "@" + b + ".com");
    	-->
    </script></div>
    </div></div>
    <!------------>
    
    <!-- CONTENT -->
    <div id="contentwrapper">
    <div id="left-sidebar">
      <p>Home</p>
      <p>The House</p>
      <p>Luxury Breaks</p>
      <p>Facilities</p>
      <p>Availability</p>
      <p>About Morston</p>
      <p>Contact Us</p>
    </div>
    <div id="right-tile"><img src="i/index/main_1.jpg" width="775" height="316" /></div>
    <div id="right-content">
    This is 'right-content' div
    </div>
    </div>
    <!------------->
    
    <!-- FOOTER -->
    </div>
    <div id="footer">
    <div style="float:right;">Web Design by &nbsp;<img src="i/layout/ftr_appazza.png" width="70" height="13" alt="Web Design by Ben Weston at Appazza" align="texttop" /></div>
    <p>Copyright &copy; Hoe Hall, 2012. All Rights Reserved</p>
    <p>ACCESSIBILITY &nbsp;&nbsp;| &nbsp;&nbsp;SITE MAP &nbsp;&nbsp;| &nbsp;&nbsp;CONTACT</p>
    </div>
    <!------------>
    
    
    </body>
    Last edited by benweston; 03-15-2012 at 12:43 AM.

  • #2
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No one?

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Elements defined as 100% height will be 100% the height of their parent. If the element isn't as high as you expect it to be then that is because its parent isn't that height and needs to be made bigger in order to allow the child element to be bigger.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Elements defined as 100% height will be 100% the height of their parent. If the element isn't as high as you expect it to be then that is because its parent isn't that height and needs to be made bigger in order to allow the child element to be bigger.
    I'm aware of that. That wasn't my question?! My question was HOW as 'height: auto !important; min-height: 100%' has no effect whatsoever on the parent.
    Last edited by benweston; 03-14-2012 at 10:42 PM.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by benweston View Post
    I'm aware of that. That wasn't my question?! My question was HOW as 'height: auto !important; min-height: 100%' has no effect whatsoever on the parent.
    It would in turn be restricted by its parent.

    Do you have 100% height on the html element and the body element? if not then you can't get 100% height on anything nside the body because the body isn't that high.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    It would in turn be restricted by its parent.

    Do you have 100% height on the html element and the body element? if not then you can't get 100% height on anything nside the body because the body isn't that high.
    Yes I do. The problem seems to be that if the screen resolution is say, 1440x900, the '100% height' of the whole page wrapper is 900px. When I set 100% height on a child element of that wrapper, it seems to inherit the 900px height rather than a relative percentage.


  •  

    Posting Permissions

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