Can anyone tell me why "Main" Div will not float left next to "Menu" div?

I can't seem to get it to go up.

Thank you!

Phil

<html>
<head>
<style type="text/css">

div#container {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 20px;
	width: 1000px;
	height: auto;
}

div#title {
	background-color: #ff638d;
	text-align: center;
	font-size: 300px;
	}

div#menu {
	background-color: #0586b8;
	text-align: right;
	font-size: 50px;
	width: 300px;
	}
	
div#main {
	float: left;
	width: 500px;
	background-color:gray;
    }


</style>


</head>


<div id="container">


	<div id="title">
	Title
	</div>

		<div id="menu">

		<li>Menu 1</li>
		<li>Menu 2</li>
		<li>Menu 3</li>
		<li>Menu 4</li>
		<li>Menu 5</li>
		<li>Menu 6</li>
		<li>Menu 8</li>
		<li>Menu 9</li>
		<li>Menu 10</li>
		<li>Menu 11</li>
		<li>Menu 12</li>

		</div>
	
		
		
		<div id="main">	

		<p>Main</p>

		</div>
	
	

</div>



</html>

Recommended Answers

All 4 Replies

wrap your code in
[code=language] code

[/code] tags leave out the blank lines
it makes it easier to read

use proper html doctypes if you want to use attributes of those doctypes
<html> means html 2.0 = no floats

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

fun isn-nit
float the menu left

dude, just add "float:left" in #main id....it will work !!

Cheers

try to use

float: left;

to #menu

and

float: right;

to #main

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.