Member Avatar for ACRDepos

Hello I have a webpage here:
http://turningheadssalons.com/newabout.htm

And as you can see, the H1 tag that says: "Who We Are" floats underneath it's parent container. The strange thing about this is, is that the inner container is embedded inside of the parent container, which by default, the parent container should expand, based on the content inside of the inner container.

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Turning Heads Salon - New Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="stylesheet" type="text/css" href="search.css" />

</head>

<body>

<div id="maincontainer">
<div id="topdiv">

<div id="topdivleft">
<span class="topdivleftfloat"><img src="Images/TurningHeadsLogo.png" alt="Turning Heads Salon"></span>
</div>

<div id="topdivright">
<span class="topdivrightfloatsearch">
<form method="get" action="/search" id="search">
    <input name="q" type="text" placeholder="Search..." />
</form>
</span>
<span class="topdivrightfloat">
<ul>
    <li><a href="">Home</a></li>    &nbsp;&nbsp;\\
    &nbsp;&nbsp;<li><a href="">About</a></li>    &nbsp;&nbsp;\\
    &nbsp;&nbsp;<li><a href="">Services</a></li>    &nbsp;&nbsp;\\
    &nbsp;&nbsp;<li><a href="">Products</a></li>    &nbsp;&nbsp;\\
    &nbsp;&nbsp;<li><a href="">Portfolio</a></li>    &nbsp;&nbsp;\\
    &nbsp;&nbsp;<li><a href="">Request an Appointment</a></li>    &nbsp;&nbsp;\\
    &nbsp;&nbsp;<li><a href="">Careers</a></li>    &nbsp;&nbsp;\\
    &nbsp;&nbsp;<li><a href="">Articles</a></li>
</ul>
</span>

</div>
</div>

<div id="infobox">
<div id="infoboxleft">
<h1>Who We Are</h1>
</div>
</div>

<div id="mainfooter">
North Location: 2231 Tamiami Trail, Port Charlotte, FL 941-629-4247 (HAIR)<br>
South Location at Shawn and Company: 4678 Tamiami Trail, Port Charlotte, FL 941-625-0060<br><br>
Hours: Tuesday - Thursday: 9 AM - 7 PM, Friday: 9 AM - 5 PM, Saturday: 9 AM - 4 PM<br>
Special Appointments and Events Available<br><br><br>
<span class="copyright">Copyright 2013 - Turning Heads Salons - Terms and Conditions - Privacy Policy</span>
</div>

</div>

</body>
</html>
Edited by ACRDepos
  • 2 Contributors
  • 3 Replies
  • 2K Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by ACRDepos
Member Avatar for ACRDepos

Mods, I found a solution to this answer. I had to set the property of the parent container to have, display: table. However, can anyone clarify a bit more on this topic?
Thanks

Member Avatar for JorgeM

The "parent" container doesn't vertically "expand" as you describe because the "infobox" div is "floating". When an element is set to float, its taken out of the normal document flow.

There are several ways to fix this. I would not set it to display:table. Try this... remove the display:table and just before the end </div> tag on the infobox div, add this line.

<div style="clear:both"></div>

So, the infobox div should look like this...

<div id="infobox">
  <div id="infoboxleft">
     <h1>Who We Are</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit......
        ......
        ......

<div style="clear:both"></div>
</div>
Edited by JorgeM
Member Avatar for ACRDepos

That definitely did the trick! Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.