HTML and CSS

Float left not working???

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2007

Posts: 24

Reputation: plarsen111 is an unknown quantity at this point

Solved Threads: 0

plarsen111 plarsen111 is offline

Offline

Newbie Poster

Float left not working???

Apr 9th, 2009

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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>

Last edited by Ezzaral; Apr 9th, 2009 at 4:55 pm. Reason: Added [code] [/code] tags. Please use them to format any code that you post.

•

Join Date: Jan 2009

Posts: 1,398

Reputation: almostbob has a spectacular aura about

Solved Threads: 170

almostbob

Offline

Nearly a Posting Virtuoso

Re: Float left not working???

Apr 9th, 2009

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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">
<!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

Last edited by almostbob; Apr 9th, 2009 at 4:59 pm.

Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved