Ayuda con Float

[dieguito01]

Que tal gente, estoy queriendo hacer una especie de tabla con 3 columnas y 4 filas con CSS, pero tengo un par de problemas con distintos navegadores, como el IE 7 y el firefox.

Código:

<div id="mainContent">  

      <div id="columna_izquierda_arriba_round">
      </div>
      <div id="columna_medio_arriba_round">
      </div>
      <div id="columna_derecha_arriba_round">
      </div>


      <div id="columna_izquierda_internet">
        <p>Internet dsdasd</p>
        <p>Software</p>
      </div>
      <div id="columna_izquierda">
        <p>Internet dsdasd</p>
        <p>Software</p>
      </div>
      <div id="columna_izquierda">
        <p>Internet dsdasd</p>
      <p>Software</p>
      </div>


      <div id="columna_izquierda_multimedia">
        <p>Internet dsdasd</p>
        <p>Software</p>
      </div>
      <div id="columna_izquierda">
        <p>Internet dsdasd</p>
        <p>Software</p>
      </div>
     <div id="columna_izquierda">
        <p>Internet dsdasd</p>
        <p>Software</p>
      </div>
      

      <div id="columna_izquierda_abajo_round">
      </div>
      <div id="columna_medio_abajo_round">
      </div>
      <div id="columna_derecha_abajo_round">
      </div>
    
</div>

<div id="mainContent">
OTRO BLOQUE
</div>

Código:

#mainContent
{
	margin-right: 28%;
	margin-left: 12px;
	margin-bottom: 15px;
	margin-top: 15px;
}

#columna_izquierda
{
	float:left;
	width:30%;

	background-color: #F0F0F0;

	padding-left: 3%;
	padding-top: 20px;
	padding-bottom: 20px;

	line-height: 8px;
}

#columna_izquierda_internet
{
	float:left;
	width:30%;

	padding-left: 3%;
	padding-top: 20px;
	padding-bottom: 20px;

	background-color: #F0F0F0;
	background-image: url(imagenes/medio/categorias/internet.png);
	background-repeat: no-repeat;
	background-position: left top;

	line-height: 8px;
}

#columna_izquierda_multimedia
{
	float:left;
	width:30%;

	padding-left: 3%;
	padding-top: 20px;
	padding-bottom: 20px;

	background-color: #F0F0F0;
	background-image: url(imagenes/medio/categorias/multimedia.png);
	background-repeat: no-repeat;
	background-position: left top;

	line-height: 8px;
}


#columna_izquierda_arriba_round
{
	float:left;

	width:30%;
	height: 30px;

	padding-left: 3%;

	background-image: url(imagenes/medio/categoriasround/arribaizq.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #F0F0F0;

}

#columna_medio_arriba_round
{
	float:left;
	width:30%;
	height: 30px;
	padding-left: 3%;
	background-color: #F0F0F0;
}

#columna_derecha_arriba_round
{
	float:left;
	width:30%;
	height: 30px;
	padding-left: 3%;
	background-image: url(imagenes/medio/categoriasround/arribader.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-color: #F0F0F0;

}

Mi problema es el siguiente, MainContain lo utilizo para hacer bloques, luego dentro de un bloque quiero meter esta tabla echa en css.

Les muestro los problemas que tengo.

[IMG]serv2.imagehigh.com/imgss/5970593_IE.JPG[/IMG]

[IMG]serv2.imagehigh.com/imgss/5970592_Dibujo.JPG[/IMG]