Help with CSS2 layout (mostly floats)

Master_Zen

Hello there

I have a small but frustrating problem with CSS2 which I hope some of you might help solve.

Basically I am trying to arrange three variable-height blocks in a way that the first (#eramenu) goes to the left, the second (#erapic) goes immediately to the right of the first one, and the third (#eratext) goes immediately below the second one. These three blocks are contained inside another block (#block) which has the background properties and which has to expand vertically to whatever the size the group of three blocks ends up being. The overall width is defined in the page's wrapper (#wrapper) set to 750px.

This is the code of the page itself:

<body>
<div id="wrapper">
  <div id="top">'; include $inc . 'html_top.php'; echo '</div>
  <div class="tab">' . strtoupper ($langvar['profile']) . '</div>
  <div class="title">' . $eralang . '</div>
  <div id="block">
    <div id="eramenu">' . #eramenu . '</div>
    <div id="erapic">' . #erapict . '</div>
    <div id="eratext">' . #eratext . '</div>
  </div>
  <div class="settings">' . $langset2 . '</div>
  <div class="spacer"></div>
  <div id="footer">'; include $inc . 'html_footer.php'; echo '</div>
</div>
</body>

This is the relevant CSS

#wrapper {
	width: 750px;
	}

#block {
	background-color: #999900; 
	}

#eramenu {
	width: 200px;
	padding-top: 25px;
	text-align: center;
	float: left;
	}

#erapic {
	width: 548px;
	text-align: center;
	float: left;
	}

#eratext {
	width: 548px;
	margin-left: ;
	float: right;
	}

The Problem

The problem is that #block only resizes with respect to #erapic and not to the other three. I have enclosed a picture of how the page looks in Dreamweaver. As you can see, the three variable-height blocks (#eramenu, #erapic, #eratext) are positioned perfectly. However, #block (the part shaded in brown) only covers #erapic when instead I want it to cover all three (the red outline is the area which should be brown).

I assume I am doing something wrong with the CSS, so any help is greatly appreciated. If anyone needs more info (i.e. code), just ask.

Thanks
-R

(P.S. don't mind the crazy text, it's part of a PHP file)

Master_Zen

This is a simplified graphic of exactly what I want to achieve:

bongbong

if you are desiging for IE only, try:

#block {
background-color: #999900;
height: 1px;
}

IE adjusts the size automatically.

however if you are designing for other browsers like opera, firefox etc, i haven't figured it out yet. actually maybe you should view your code in these browsers as IE always renders the html code in a way that it 'thinks' you want to show.

bongbong

alternatively, you can add

at the end of the inner <div>'s.

this seems to work both in IE and Opera.