0

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
9
Views
4 Years
Discussion Span
Last Post by ACRDepos
0

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.