www.webdeveloper.com
Results 1 to 8 of 8

Thread: Div is not resizing to content

  1. #1
    Join Date
    Feb 2011
    Posts
    5

    Div is not resizing to content

    I have a parent div holding a floating div inside of it, but for some reason, the parent div is not resizing to the floating div inside. I know this because the parent div has a background image and a little bit under that background image, it no longer repeats fully. I've tried the whole clear:both thing to no avail and have no idea what else to do. I know i'm doing something wrong.

    I used firebug and saw that the body tag cuts off... I have no idea why I have specified no height anywhere in those divs.

    Here's my css file:

    Code:
    body {
    	margin:0px; padding:0px;
    	background:#000000 url(images/bghome.jpg) repeat;
    	font-family:Century Gothic, Arial, Helvetica, sans-serif;
    	color:#FFFFFF;
    	font-size:13px;
    }
    
    .footer {
        background: url("images/seethru.png") repeat scroll 0 0 transparent;
        font-size: 10px;
       
    }
    #main {width: 100%;
    position: relative;}
    .container {
    	width:1277px;
    	margin:0 auto;
    	position:relative;
    	z-index: 1;
    	background-color:#000;
    	background-image:url(images/imghome.jpg);
    	background-position:top center;
    	
    	
    }
    .containerbody {
    	width:960px;
    	top:135px;
    	margin:0 auto;
      	position:relative;
    	
    }
    .content {
    	padding-left:15px;
    	width: 400px;
    	position: relative;
    	float: left;
    	clear: both;
    
    
    	
    }
    .content2 {
    	padding-left:15px;
    	width: 290px;
    	position: relative;
    	text-align: left;
    	float: left;
    	clear: both;
    	margin-right: 670px;
    	
    }
    .content3 {
    	padding-left: 15px;
    	width: 960px;
    	position: relative;
    	text-align: left;
    	float: left;
    	margin:0 auto;
    	clear: both;
    	
    }
    .containerfoot {
    	width:960px;
    	margin:0 auto;
    	position:relative;
    }
    #header {
    	width:960px;
    	margin:0 auto;
      	position:relative;
    }
    #headerbg {
    	background: url(images/seethru.png) repeat;
    	width: 100%;
    	position: absolute;
    	top:0;
    	z-index: 2;
    }
    #footer {
    	background: url(images/seethru.png) repeat;
    	
    	position: relative;
    	margin:0 auto;
    	
    }
    #footercontent {
    	width: 1277px;
    	position: relative;
    	margin:0 auto;
    	padding-bottom:20px;
    	padding-top:20px;
    	background-color:#000;	
    	
    }
    #footercontent2 {
    	width: 960px;
    	position: relative;
    	margin:0 auto;
    	
    }
    #footerfirst {
    	width: 240px;
    	position: relative;
    	float: left;
    	margin-right:40px;
    	clear: both;
    }
    #footerleft {
    	width: 224px;
    	position: relative;
    	float: left;
    	margin-right:10px;
    }
    #footerlast {
    	width: 212px;
    	position: relative;
    	float: left;
    	text-align:right;
    }
    #footer h1 {
    	font-size: 12px;
    	font-weight: bold;
    	text-transform:uppercase;
    	margin:0;
    	padding-bottom: 10px;
    }
    #footer small {
    	font-size: 11px;
    }
    #logoimg h1, #logoimg small {
    	margin:0px;
    	display:block;
    	text-indent:-9999px;
    }
    
    
    #logoimg {
    	width:442px;
    	position: relative;
    	z-index: 1;
    	padding-top: 15px;
    	float: left;
    	padding-bottom: 10px;
       }
       
    #menubg {
    	width:960px;
    	height: 100px;
    	text-align: right;
    	padding-top: 5px;
    }
    ul#menu {
    	clear:left;
    	float:right;
    	list-style:none;
    	margin:0;
    	padding:0;
    	position:relative;
    	text-align:center;
    	top: 10px;
    }
    ul#menu li {
    	display:block;
    	float:left;
    	list-style:none;
    	margin:0;
    	padding:0 0px 0 20px;
    	position:relative;
    
    }
    ul#menu li a {
    	display:block;
       margin:0 0 0 1px;
       padding:3px 0px 3px 0px;
       text-decoration:none;
       outline:none;
       color: #ffffff;
       font-size: 12px;
       text-transform:uppercase;
    
    }
    ul#menu li a.active, ul#menu li a:hover {
    	color:#ccc;
    	font-weight: normal;
    }
    
    images, #logo {
    	behavior: url(scripts/iepngfix.htc);
    	text-align: right;
    }
    
    
    h2 {
    	margin:0px 0px 10px 0px;
    	font-size:36px;
    	font-family:Helvetica, Arial, Sans-serif;
    	color:#FFFFFF;
    }
    
    a {
    	color:#FFF;
    	font-weight:normal;
    	text-decoration:none;
    }
    a:hover {
    	text-decoration:underline;
    	text-align: right;
    }
    p { margin: 0px 0px 15px 0px; }
    
    
    .clearfix:after
    {
    content: ".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    
    .clearfix
    {
    display:inline-block;
    }

    and here's my html file

    Code:
    <body>
        <div id="main">
       	  
            
            
          <div id="headerbg">
              
        <div id="header">
                    
               	  
    			<div id="logoimg"><img src="images/logo.png" width="442" height="41" alt="Larry Rifkin, DDS" /> </div>
                  			
                    
                    <div id="menubg">
                <ul id="menu">
                        <li><a href="index.html">Home</a></li>
    					<li><a href="about.html">The Practice</a></li>
    					<li><a href="samples.html">Services</a></li>
    					<li><a href="reviews.html">Technology</a></li>
    					<li><a href="contact.html">Smile Gallery</a></li>
                        <li><a href="samples.html">Videos</a></li>
    					<li><a href="reviews.html">Same Day Crowns</a></li>
    					<li><a href="contact.html">Contact Us</a></li>
                  </ul>
                </div>
                
            </div>
          </div>
          <div class="container ">
            <div class="containerbody">
              <div class="content ">
                <p>Whatís the difference between Dr. Laurence Rifkin and other 90210 cosmetic dentists?</p>
                <p>With so many Beverly Hills Cosmetic Dentists to choose from most people are wondering what the difference is. In our office it is Dr. Laurence Rifkinís 30 years of experience, our courteous and professional staff, our use of advanced dental technologies, and our commitment to delivering quality results that exceed the expectations of our patients. We incorporate Science, technology, art, and a team approach to comprehensive facial beauty to deliver beautiful, natural, youthful, healthy smiles. We are here to help you accomplish your personal dental goals and maximize your time and resources.</p>
                <p><img src="images/videoholder.jpg" width="344" height="208" alt="video" /></p>
                <p>Experience<br />
                  matters</p>
                <p>Cosmetic Dentist Laurence Rifkin is an original Beverly Hills 90210 Dentist. He has been serving his elite Beverly Hills Clientele for over 30 years.  Dr. Rifkin is a professional artist and sculptor. His experience and artistic background give him the ability to recognize total facial harmony. Dr Rifkin addresses the total face when it comes to cosmetic procedures. He has an incredible eye for the details of a naturally beautiful looking smile and face. With his own on site dental Cosmetic Dentist Laurence Rifkin is an original Beverly Hills 90210 Dentist. He has been serving his elite Beverly Hills Clientele for over 30 years.  Dr. Rifkin is a professional artist and sculptor. His experience and artistic background give him the ability to recognize total facial harmony. Dr Rifkin addresses the total face when it comes to cosmetic procedures. He has an incredible eye for the details of a naturally beautiful looking smile and face. With his own on site dental laboratory and private suite for cosmetic surgery collaboration and sedation cases, Dr Rifkin oversees the quality of his dentistry every step of the way. He is able to offer his patients a complete cosmetic solution, privacy, experience, and expertise in a beautiful setting. Dr. Rifkinís patients get younger, sexier, superstar smiles with options such as porcelain veneers, teeth whitening, dental implants, full mouth rehabilitations, and innovative techniques that create greater lip fullness for a more youthful look</p>
              </div>
              <div style="clear:both;"></div>
    
            </div>
            <div style="clear:both;"></div>
    
          </div>
    
    
    	
    </div>
        <div id="footer">
              <div id="footercontent">
                <div id="footercontent2">
                <div id="footerfirst">
                <h1>CONTACT US</h1>
                <p>Address:<br />
                  Private Practice<br />
                  414 North Camden Drive, Suite 1280<br />
                Beverly Hills, CA 90210</p>
                <p>Phone: 310.273.0200<br />
                  Fax: 310.205.0718</p>
                  </div>
                  <div id="footerleft">
                <h1>PROCEDURES</h1>
                <p>Cosmetic Dentistry<br />
                  Invisalign<br />
                  Dental Implants<br />
                  Teeth Whitening Beverly Hills<br />
                  Beverly Hills Cosmetic Dentistry<br />
                </p>
                  </div>
                  <div id="footerleft">
                <p>&nbsp;</p>
                <p>Dental Implants<br />
                  Teeth Whitening<br />
                  Oral Health<br />
                  CEREC</p>
                  </div>
                  <div id="footerlast">© 2011 DRLAURENCERIFKIN.COM<br />
                  <small><a href="#">sitemap</a></small></div>
                </div>
        </div>
    </div>
    
    	
        </div>
    </body>

  2. #2
    Join Date
    Feb 2011
    Posts
    5
    oh also even my footer background isn't expanding to it's full height. and my footer is overlapping the content above it. i'm just all messed up

  3. #3
    Join Date
    Feb 2011
    Posts
    5
    or rather my content is overlapping my footer

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by carina View Post
    I have a parent div holding a floating div inside of it, but for some reason, the parent div is not resizing to the floating div inside.
    Old and well known behavior Floated elements have their own, independent, layout. It's like their layout would have been "escaped" out of their parent's layout; so that the parent remains with a null layout of his own. There are several ways to solve that problem. One of them, probably the most simple, is to add a final empty div which which should clear the float:
    Code:
    <div id="parentDiv">
    	<div style="float:left"></div>
    	<div style="float:right"></div>
    	<div style="clear:both"></div>
    </div>

  5. #5
    Join Date
    Feb 2011
    Posts
    5
    yah i actually tried that but it hasn't worked... you can see in my html code above:

    Code:
    <div class="content ">
                <p>Whatís the difference between Dr. Laurence Rifkin and other 90210 cosmetic dentists?</p>
                <p>With so many Beverly Hills Cosmetic Dentists to choose from most people are wondering what the difference is. In our office it is Dr. Laurence Rifkinís 30 years of experience, our courteous and professional staff, our use of advanced dental technologies, and our commitment to delivering quality results that exceed the expectations of our patients. We incorporate Science, technology, art, and a team approach to comprehensive facial beauty to deliver beautiful, natural, youthful, healthy smiles. We are here to help you accomplish your personal dental goals and maximize your time and resources.</p>
                <p><img src="images/videoholder.jpg" width="344" height="208" alt="video" /></p>
                <p>Experience<br />
                  matters</p>
                <p>Cosmetic Dentist Laurence Rifkin is an original Beverly Hills 90210 Dentist. He has been serving his elite Beverly Hills Clientele for over 30 years.  Dr. Rifkin is a professional artist and sculptor. His experience and artistic background give him the ability to recognize total facial harmony. Dr Rifkin addresses the total face when it comes to cosmetic procedures. He has an incredible eye for the details of a naturally beautiful looking smile and face. With his own on site dental Cosmetic Dentist Laurence Rifkin is an original Beverly Hills 90210 Dentist. He has been serving his elite Beverly Hills Clientele for over 30 years.  Dr. Rifkin is a professional artist and sculptor. His experience and artistic background give him the ability to recognize total facial harmony. Dr Rifkin addresses the total face when it comes to cosmetic procedures. He has an incredible eye for the details of a naturally beautiful looking smile and face. With his own on site dental laboratory and private suite for cosmetic surgery collaboration and sedation cases, Dr Rifkin oversees the quality of his dentistry every step of the way. He is able to offer his patients a complete cosmetic solution, privacy, experience, and expertise in a beautiful setting. Dr. Rifkinís patients get younger, sexier, superstar smiles with options such as porcelain veneers, teeth whitening, dental implants, full mouth rehabilitations, and innovative techniques that create greater lip fullness for a more youthful look</p>
              </div>
              <div style="clear:both;"></div>

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    I said "a final div", which was meant inside the parent
    Code:
    <div class="content">
    <p></p
    <p></p>
    <div style="clear:both;"></div>
    </div>

  7. #7
    Join Date
    Feb 2011
    Posts
    5
    i have a number of divs so it's a bit confusing... did you mean the parent of all which is <div id="main">?

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    floated elements must have a parent div. Insert a div clear:both as being the last child node of that parent. watch again, attentively, my post

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles