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
    Nov 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Inner div's dont resize the parent div

    Ok, I'm designing a layout and I have some content thats loaded the following way:

    Code:
    <div id="mainDiv">
    
        <div id="headerDiv"></div>
        <div id="contentDiv">
        	<div id="leftDiv"></div>
            <div id="rightDiv"></div>
        </div>
        <div id="footderDiv">
        	<?php include('footer.php'); ?>
        </div>
    
    </div>
    with the CSS as follows:

    Code:
    body {
    	background-attachment: fixed;
    	background-image: url(images/background_bubble.jpg);
    	background-repeat: no-repeat;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 14px;
    	background-position: center;
    }
    #mainDiv {
    	position:relative;
    	width: 1000px;
    	min-height: 100%;
    	background-repeat: repeat;
    	background-image: url(images/70percent.png);
    	margin-right: auto;
    	margin-left: auto;
    }
    #mainDiv #footderDiv {
    	font-family: Verdana, Geneva, sans-serif;
    	color: #FFF;
    	text-decoration: none;
    	text-align: center;
    	background-image: url(images/20percent.png);
    	padding: 10px;
    	width: 980px;
    	margin-right: auto;
    	margin-left: auto;
    	
    }
    
    #mainDiv #headerDiv {
    	color: #FFF;
    	height: 100px;
    	width: 970px;
    	margin-right: 15px;
    	margin-left: 15px;
    	padding: 15px;
    }
    #mainDiv #contentDiv {
    	color: #000;
    }
    #mainDiv #contentDiv #leftDiv {
    	float: left;
    	width: 630px;
    	margin: 5px;
    	padding-left: 15px;
    }
    #mainDiv #contentDiv #rightDiv {
    	float: right;
    	width: 315px;
    	margin: 5px;
    	padding-right: 15px;
    }
    The main div does not extend all the way below the content. What am I doing wrong?

    Thanks!

    Oh yeah.. first post here. Great forums!
    Last edited by jud420; 11-05-2009 at 09:56 PM.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Because you're expecting the parent div to expand to contain floated elements and that won't happen cause that's not how it works. To get it to expand, you need to add 'overflow:auto' to the parent element.

  • Users who have thanked drhowarddrfine for this post:

    jud420 (11-05-2009)

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Perfect!! Thats exactly what I was missing. Thanks!


  •  

    Posting Permissions

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