No replies
Tanthalas
Offline
newbie
England
Last seen: 18 years 3 weeks ago
England
Joined: 2004-07-26
Posts: 1
Points: 0

Hi there,
I've recently clued up on CSS2, and I'm doing my first 2-column CSS design. Basically, I'm trying to get 2 divs to sit next to each other on a page - a menu and a content div. I've got the XHTML code set up like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Bloody Internet Exploder</title>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="ps_style.css" />
  </head>
  <body>
    <div id="masthead">
      <img src="images/masthead.jpg" height="150" width="750" alt="I hate IE" />
    </div>
    <div id="container">
      <div id="menu">
        <img src="images/menu_title.gif" width="170" height="30" alt="Menu Title" />
        <ul>
          <li>menu1</li>
          <li>menu2</li>
        </ul>
      </div>
      <div id="body">
        <img src="images/welcome.gif" width="570" height="60" alt="IE is a really ghey browser" />
      </div>
    </div>
    <div id="footer">
      <div class="centred">
      Ooga booga!
      </div>
    </div>
  </body>
</html>

And the CSS:

body {
	background-color	:	#BFB087;
}

div#masthead {
	width  	:	750px;
	height  	:	150px;
	margin  	:	0 auto;
	padding-bottom  :	15px;
}

div#container {
	width  	:	750px;
	margin  	:	0 auto;
}

div#menu {
	color  	:	#433B26;
	background-color	:	#D4C8A2;
	background  :	url("images/side_bar.gif") repeat-y #D4C8A2;
	width  	:	170px;
	float  	:	left;
	margin  	:	0 0 0 0;
	padding  	:	0 0 0 0;
}

div#body {
	color  	:	#000000;
	background-color	:	#D4C8A2;
	background  :	url("images/side_bar2.GIF") repeat-y #D4C8A2;
	font-family  :	Georgia, Verdana, Tahoma;
	font-size  :	13pt;
	text-align  :	justify;
	margin  	:	0 0 0 170px;
	padding  	:	0 0 0 10px;
	width  	:	570px;
}

div#footer {
	clear			:	both;
	width			:	750px;
	margin		:	0 auto;
}

div.centred {
	color  	:	#000000;
	background-color	:	#D4C8A2;
	font-family  :	Georgia, Verdana, Tahoma;
	font-size  :	13pt;
	text-align  :	center;
}

div.justified {
	color  	:	#000000;
	background-color	:	#D4C8A2;
	font-family  :	Georgia, Verdana, Tahoma;
	font-size  :	13pt;
	text-align  :	justify;
}

ul.menu {
	font-family  :	Georgia, Verdana, Tahoma;
	font-size  :	11pt;
}

h1 {
	color  	:	#000000;
	font-family  :	"Georgia Bold", Verdana, Tahoma;
	font-size  :	13pt;
	font-weight  :	bold;
	text-align  :	center;
}

It displays just fine in Moz/NS/Opera, but IE6, my nemesis, shoves the content div on the line below the menu div, when they should be side by side. I'm not "up" on the various quirks and bastardisations of Internet Exploder - could someone give me a hand on what's wrong here?

Irritatingly, my setup seems identical to a site my friend Richard has done, and his works! Can anyone help me here?