[SOLUCIONADO] Altura de la columna

[RaulCDT]

No entiendo ahora porque el contenido de la columna no se ve hasta el final.., es decir el boton de enviar no se ve

Código CSS:

#contenedor {
  display: table;
  overflow: hidden;
}
 
#contenidos {
  display: table-row;
 clear: both; 
}
 
#columna1, #columna2 {
  display: table-cell;
}
.columna1 {
    float: left;
    width:670px;
    background: #FFF;
    padding: 0 4px 3px 2px;
    margin: 0 2px 2px 2px;
 
}
.columna2alta {
    float: right;
    width:315px;
    background: #000;
   
}
 

En columna1 tengo un formulario..se ve todos los campos menos el boton de enviar que esta por debajo del footer seguramente..

Código CSS:

#pie {text-align: center;
background-color: #1f2024;
color: #fff;
height: 3em;
margin-top: -3em;
   position: relative;
  clear:both;
  width:995px;
}
.ejemplo {position:relative; top: 0.5em;
font-size: 1em;
}
 

Y así la estructura:

Código HTML:

<div id="contenedor">
  <div id="contenidos">
    <div id="columna1" class="columna1">formulario que esta a la izquierda</div>
<div id="columna2" class="columna2alta">texto texto que esta a la derecha</div>
<div id="contenidos">
    
    <div id="columna2" class="columna2alta">texto texto que esta a la derecha debajo del otro</div>
<div style="clear: both"></div> </div>
</div>
<div id="pie">
   <span class="ejemplo">Footer</span>
   </div> 

[RaulCDT]

Creo arreglarlo..

He cambiado el margin-top: 0em; del footer y en principio me funciona..

Saludos!

[pzin]

No entendí muy bien el problema. De todas ¿seguro que necesitas tanto clear? ¿Qué hay que limpiar cuando no hay nada flotado? O es eso o no acabo viendo bien la estructura.
Adicionalmente, estás repiiendo identificadores, y esos deben ser únicos en el HTML. Usa clases.

Igual un ejemplo más completo o incluso si lo tienes en algún sitio vendría mejor.

[RaulCDT]

tengo aqui donde he estado probando...

[URL="http://codepen.io/anon/pen/Izhib"]http://codepen.io/anon/pen/Izhib[/URL]