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
    Regular Coder
    Join Date
    Oct 2011
    Posts
    237
    Thanks
    11
    Thanked 5 Times in 5 Posts

    div not having height of child div.

    Hi guys please could you help with this css bud.

    I have set a wrapper which has a white border, i then set a container within the wrapper which has a rgba white background and a rgba blue 10px border.

    The container and the wrapper is set to a min-height of 300px so that i can see that all divs are correctly placed.

    The problem is that the wrapper is not growing with the div within, i have set a screenshot also below.

    Here is the html and css:

    html:
    Code:
    <div id="wrapper">
    
    	<div id="main_container"></div>
    
    </div>
    css:
    Code:
    body{
    	margin:0;
    	padding:0;
    	top:0px;
    	background-image:url(../images/bg.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-color: #6399C8;
    }
    
    #wrapper{
    	width:960px;
    	float:none;
    	margin: 105px auto 0px auto;
    	border: 1px solid #FFF;
    	min-height:300px;
    }
    
    #main_container{
    	width:940px;
    	float:left;
    	min-height:300px;
    	background-color:rgba(255,255,255,.6);
    	border: 10px solid rgba(29,145,194,.6);
    }
    The screenshot is attached.

    You see the 1px white border is not the same height as the inner div. I have also set the wrapper as height:auto !important; and this still did not work.

    Thanks
    Attached Thumbnails Attached Thumbnails div not having height of child div.-screenshot.jpg  

  • #2
    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
    What you need to do is clear the floats, instead of setting min-height/height to the outer element.

    Add overflow:auto; to #wrapper. Read http://www.quirksmode.org/css/clearing.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by devinmaking View Post
    The problem is that the wrapper is not growing with the div within, i have set a screenshot also below.
    http://complexspiral.com/publication...aining-floats/ is a good article explaining why this happens if interested.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    Oct 2011
    Posts
    237
    Thanks
    11
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    What you need to do is clear the floats, instead of setting min-height/height to the outer element.

    Add overflow:auto; to #wrapper. Read http://www.quirksmode.org/css/clearing.html
    Hi

    Thanks for the reply, it solved it for a second but as soon as i input more things it then did what is on screenshot 1, what is needed is screenshot 2 but with the white border around it.

    html:
    Code:
    <div id="wrapper">
    
    	<div id="main_container">
        
        	<div id="slide_wrap"> </div>
        
        </div>
    
    </div>
    css:
    Code:
    body{
    	margin:0;
    	padding:0;
    	top:0px;
    	background-image:url(../images/bg.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-color: #6399C8;
    }
    
    #wrapper{
    	width:960px;
    	float:none;
    	margin: 105px auto 0px auto;
    	border: 1px solid #FFF;
    	overflow: auto;
    }
    
    #main_container{
    	width:940px;
    	float:left;
    	background-color:rgba(255,255,255,.6);
    	border: 10px solid rgba(29,145,194,.6);
    }
    
    #slide_wrap{
            position: relative;
    	width:960px;
    	float:left;
    	height:360px;
    	padding:20px;
    	border: 1px solid #cacaca;
    	background-color: #000;
    	background-image: url(../images/slider-bg.png);
    	background-repeat: repeat-x;
    	background-position: left top;
    	margin: 20px 0px 0px -30px;
    }
    If this was css3 i would easily just add a box shadow around the container and not use the wrapper, but as client wants this to be 100% from ie7+ i cant use this method so i am unfortunately nesting divs and spans on this design
    Attached Thumbnails Attached Thumbnails div not having height of child div.-screenshot.jpg   div not having height of child div.-screenshot2.jpg  
    Last edited by devinmaking; 01-25-2012 at 11:13 AM. Reason: added images


  •  

    Posting Permissions

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