CSS - Multicolumn Layout!

I have looked at this a million times and now I've completely lost track...
This is the layout in IE:

as you can see, it looks perfectly fine, just like I wanted it to look...but then...

this is how it looks like in Mozilla:

The lay-out is all messed up..it seems like there is a fault in the code with the top left floater..because the right floater only begins at the same point the top left floater ends...
I truly want this to look fine in both browsers...even though the most people use IE...

(the page is at
http://www.finedesigns.nl/portfolio/voorbeeld huisarts)

this is the coding:
body
{
background-color:#FFFFFF;
text-align: center;
}

a
{
font-size:10px;
text-decoration:none;
font-weight:600;
font-family:verdana;
}

a:link {color:#006666;}
a:visited {color:#006666;}
a:hover {color:#CC9900;}

#container
{
background-color:#006666;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
margin: 10px auto;
font-family:verdana;
font-size:10px;
color: #006666;
line-height: 120%;
}

#Header
{
padding: 5px;
height:100px;
}

#Left
{
float: left;
width: 150px;
margin-right:5px;
margin-left:5px;
background-color:#CCFFCC;
}
#Left2
{
clear:left;
float: left;
width: 150px;
height:210px;
margin-right:5px;
margin-left:5px;
background-color:#CC9900;
}

#Right
{
float: right;
width: 150px;
height:450px;
margin-right:5px;
margin-left:5px;
background-color:#CCFFCC;
}

#Content
{
background-color:#FFFFFF;
height:450px;
margin-left: 160px;
margin-right: 160px;
padding: 10px 10px 10px 10px;
}

#Footer
{
clear:both;
background-color:#006666;
padding: 0px;
height:5px;
}

To make this easier on everyone, I've turned my idea into an image, so please see the image I attached.

I'm absolutely horrible with CSS, so I just need some help with converting that image into CSS/HTML. I'm hoping to have each box an unordered list, so they are still organized nicely even if someone has CSS disabled.

Thanks.

hey guys i have an issue with a multicolumn float issue on my page

here is the css Code:

vi portal.css
  #contentcontainer {
    position: absolute;
    background-color: blue;
    top: 20px;
    left: 100px;
    right: 100px;
    width: 500px;
  }
  #protal .portal-column {
    float: left;
    width: 30%;
  }

  #portal #portal-column-block-list {
    position: absolute;
    width: 200px;
    top: 180px:
    left: 10px;
    z-index: 10;
  }

  #portal .block .block-toggle {
    background-image: url(block-slide.png);
    float: right;
    cursor: pointer;
  }

  #portal .block .block-toggle span {
    display: none;
  }

  #portal .block-list-handle, #portal .handle {
    cursor: move;
  }

and the HTML in question

Code:

<div id="contentcontainer">
<div id="protal">
  <div class="partal-column" id="portal-column-0">
    <h2>Column 0</h2>
  </div>
  <div class="portal-column" id="portal-column-1">
    <h2>Column 1</h2>
  </div>
  <div class="portal-column" id="portal-column-2">
    <h2>Column 2</h2>
  </div>

     <div class="portal-column" id="portal-column-block-list" style="display: none;">
       <h2 class="block-list-handle">Block List</h2>
    <!-- Blocks go here -->
          <div class="block">
            <h3 class="handle">
              <a class="block-toggle"<span>toggle</span></a>
                  <!-- title of block -->
                     testing links
            </h3>
            <div class="content">
               <!-- Content -->
                  <?php
                  $content = array(1 => 'Home', 2 => 'About', 3 =>'Contact');
                  echo ("<ul> \n");
                     foreach ($content as $id => $page) {
                       echo ("<li><a href='?id=$id'>$page</a></li> \n");
                     }
                  echo ("<ul> \n");
                  ?>
            </div>
          </div>


  </div>
</div>
</div>

the problem is that it appears that only column-2 and column-1 maybe are floating to the left properly. anyone got some suggestions on whats wrong

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.