Text Under Multiple Left Floats

HTML & CSS
1

I’ve been goofing with it for a full day and multiple Google searches haven’t helped.

My desired layout is a menu section on the left, then content on the right. The content will contain multiple “float: left;” classes for thumbnails. Then a section with text under the thumbnails (not captions, but a paragraph with text). The problem is that I want this text underneath the thumbnails, but not underneath the menu section.

Here is some simplified code showing the problem I am having:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
p {
	margin: 0px;
	padding: 0px;
}
#menu {
	float: left;
	width: 190px;
	border:1px solid black;}
}
#content {
	margin-left: 200px
}
.item {
	float: left;
	padding: 5px;
	margin: 5px;
	border:1px solid black;
}
#info {
}
-->
</style>
</head>
 
<body>
    <div id="menu">
      <p>This is the menu area.</p>
      <ul>
        <li>Choice</li>
        <li>Choice</li>
        <li>Choice</li>
      </ul>
    </div>
    <div id="content">
      <div class="item"><p>First thing.</p></div>
      <div class="item"><p>Second thing.</p></div>
      <div class="item"><p>Third thing.</p></div>
      <div id="info"><p>This is some additional text.</p></div>
    </div>
</body>
</html>

I want the “info” div underneath the individual “item” divs, but not all the way underneath the “menu” div. I have tried several things but nothing works. What do I need to do?

2

Remove float: left from #menu, add position: absolute to #menu and put <br clear=“left” /> after all the <div class=“item”>

3

Thank you! I only have one problem after making the changes. I have a footer on the page (I should have included a footer in the sample code, sorry I didn’t). With the changes you suggested, the footer doesn’t appear below the menu section; instead it overlaps it.

Here is some code (based on the above, with the footer added) to show what I am talking about:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
p {
	margin: 0px;
	padding: 0px;
}
#menu {
	position: absolute;
	width: 190px;
	border:1px solid black;
}
#content {
	margin-left: 200px;
}
.item {
	float: left;
	padding: 5px;
	margin: 5px;
	border:1px solid black;
}
#info {
	clear: left;
}
#footer {
}
-->
</style>
</head>

<body>
    <div id="menu">
      <p>This is the menu area.</p>
      <ul>
        <li>Choice</li>
        <li>Choice</li>
        <li>Choice</li>
      </ul>
    </div>
    <div id="content">
      <div class="item"><p>First thing.</p></div>
      <div class="item"><p>Second thing.</p></div>
      <div class="item"><p>Third thing.</p></div>
      <div id="info">
        <p>This is some additional text.</p>
      </div>
    </div>
    <div id="footer">
      <p>This is my footer</p>
    </div>
</body>
</html>

I tried using clear:both in the footer CSS but that didn’t work.

4

Because the menu is now absolute positioned, it is no longer in the flow of the website, and it’s height doesn’t count.
To solve this, you can give Content a min-height, that is the minimum height it should have to make the position of the footer look good.

Min-height isn’t supported in IE6, but using this little trick I recently learned you can make it work.


#content {
  height: auto !important;
  height: 300px;
  min-height: 300px;
}

Here min-height and height need to have the same value.

5

The problem is that my menu will be changing dynamically so I can’t set a fixed width. However…

I FINALLY figured out how to do this. I put a div around the items and set overflow: hidden. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
p {
	margin: 0px;
	padding: 0px;
}
#menu {
	float: left;
	width: 190px;
	border:1px solid black;
}
#content {
	margin-left: 200px;
}
#item-set {
	overflow: hidden;
}
.item {
	float: left;
	padding: 5px;
	margin: 5px;
	border:1px solid black;
}
#info {
}
#footer {
	clear: both;
}
-->
</style>
</head>

<body>
    <div id="menu">
      <p>This is the menu area.</p>
      <ul>
        <li>Choice</li>
        <li>Choice</li>
        <li>Choice</li>
      </ul>
    </div>
    <div id="content">
      <div id="item-set">
        <div class="item"><p>First thing.</p></div>
        <div class="item"><p>Second thing.</p></div>
        <div class="item"><p>Third thing.</p></div>
      </div>
      <div id="info">
        <p>This is some additional text.</p>
      </div>
    </div>
    <div id="footer">
      <p>This is my footer</p>
    </div>
</body>
</html>