Menu
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> </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>