Newbie needs help with dropped content

[derekjohnston]

I have been following the tutorial at Max Design on creating a web page layout. My side-by-side DIVs aren't working though. The first one called, displays as it should and the other drops down below it. Uncertain how to fix this. See it here. The yellow "content box" is dropped below where the "menu box" ends.

It would seem that the widths of the two DIVs exceeds the page width but when I reduce them to half that width, the problem persists.

Can anyone help?

Derek

[jscheuer1]

I don't know anything about Max Design but, adding these two property/value pairs to the menu definitions seems to do the trick:

	#menu {
	  margin: 0px 0px 2px 0px;
	  float:left;
	  clear:left;
	  padding: 10px;
		height: auto;
	  width: 430px;
	  background-color: aqua;
		border: 1px solid black;
	}

However, as it is being used by multiple elements, it should technically be a class, not an id. Not changing this will cause the page to fail w3c validation and also cause problems with properly written javascript (if any) designed to work with that id. Other problems could also arise. To make it a class:

	.menu {
	  margin: 0px 0px 2px 0px;
	  float:left;
	  clear:left;
	  padding: 10px;
		height: auto;
	  width: 430px;
	  background-color: aqua;
		border: 1px solid black;
	}

and the elements that use it would be class="menu" not id="menu":

    <div class="menu">menu1</div>
    <div class="menu">menu2<p>and some more content<br>to test the auto height</div>
    <div class="menu">menu3</div>
    <div class="menu">menu4</div>

Note: Due to a 1 in 100 IE only bug, style definition opening braces ({) should have one space before them:

.menu {

not:

.menu{

[derekjohnston]

Yes, that corrected the problem and I've followed your advice on the other items as well. Thanks for the quick reply.

Derek