Member Avatar for ACRDepos

Hello I have a webpage here:

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

Dani AI

Generated

, your display:table worked because it made the parent establish its own block formatting context (BFC), which causes a container to enclose internal floats. That solves the collapsing height, but display:table also tweaks sizing and margin behavior in ways you may not want. A clearer fix is to explicitly create a BFC on the container. MDN explains BFCs and why they contain floats.

Here are three reliable patterns. Pick one per container:

/* Option A (modern): contain floats without side effects */
#infobox { display: flow-root; }  /* widely supported */

/* Option B (classic clearfix): no extra markup needed */
#infobox::after { content:""; display:block; clear:both; }

/* Option C (quick): create a BFC with overflow; watch for scrollbars/clipping */
#infobox { overflow:auto; }
  • Option A is the cleanest: flow-root creates a new formatting context purely for layout containment. It avoids the overflow quirks and is self-documenting in code comments. See MDN: display and flow-root.
  • Option B mirrors ’s idea but moves the clear into CSS, keeping HTML semantic.
  • Option C works, but can introduce unwanted scrollbars or clip box shadows; use only when you actually want overflow behavior. MDN notes these trade-offs when using overflow to form a BFC. Reference.

Longer term, consider replacing float-based layout (menus, columns) with flexbox or grid so these containment issues disappear entirely. Both create their own formatting contexts by default and handle alignment responsively with less CSS. See MDN’s flexbox guide.

Recommended Answers

All 3 Replies

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.