IE CSS sizing issues

[Swan]

Well, I'm creating a basic layout for a website, and due to the majority of people around the globe using IE, naturally I need it to be IE friendly.

Here is what it looks like in FireFox:

And in IE:

I'm guessing it's something to do with my use of the DIV tag, which I prefer over table, but I really don't know.

I have come to the conclusion that IE sucks major bawls, or its CSS parsing is Microsoft standard (and anyone with a brain knows that MS standard isn't good for shit).

Here's the code:
home.html:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>Home</title>
	</head>

	<body>
		<center>
		<div class="main">

		<div style="background-image:url('images/logo-bg.png');height:25%;left:5px;right:5px;top:5px;border-bottom:thin solid black">

		<div style="border:thin solid black;
			position:relative;
			background-color:rgb(250,250,250);
			top:10%;
			height:70%;
			text-align:middle;
			width:95%">
			
			<h1>logo</h1>

		</div>

		<div style="border:thin solid black;
			background-color:rgb(250,250,250);
			position:relative;
			top:20%;
			text-align:middle;
			width:95%">
				Menu item 1 | Menu item 2 etc
		</div>

		</div>
		
		<div style="top:5%;
			position:relative;
			width:95%;
			height:65%;
			border: thin solid black;
			background-color:rgb(250,250,250)">

		<h1>Content</h1>

		</div>

		</div>
		</center>
	</body>
</html>

style.css:

body
{
	background-image: url("images/bg.png");
	background-repeat: repeat-x;
	background-attachment: fixed
}
div.main
{
	border: medium solid black;
	background-color: white;
	width: 50%;
	min-height:500px;
	height:75%
}

Help is appreciated.

ありがとう。
Thanks.

 

[TDD]

add this below the two clumn bit:

<div class="clear"></div>

and add this in your css:

div.clear {
clear: both;
}

and that'll fix it.

EDIT: Nvm, i looked at the photos and worked it out from there, not the css, hold up and lemme read it.

you'd be better off doing it this way:

<body>
<container div>

<div for head>
<div for logo></div>
<div with a left float for menu item 1></div><div with a right float for menu item 2></div>
</div><!-- end of head div -->​

<content div>

</div>



</container div>
</body>