Problema con un float

Fournier27

Soy bastante nuevo en estas lides y me encuentro con problemas que supongo son de sencilla solución, pero soy incapaz de encontrar.

La que me tiene atenazado es la siguiente:

- Un layout de dos columnas: a la izquierda un menú flotado y a la derecha un contenedor.

- Cuando intento meter dentro del contenedor otros elementos flotados y "clearados", el primer clear se coloca debajo justo del DIV del menú de la columna izquierda.

- Por supuesto, lo que yo quiero es que el clear se coloque en su lugar, en lugar de heredar la posición del div del menú.

¿Cual es la solución al enigma?

Gracias de antemano por la ayuda.

Hola, y segun tu cual es su posición?puedes poner un ejemplo visual para echarte una mano?

Perdón. Debería haberlo hecho desde el principio.

<a href="http://s3.photobucket.com/albums/y56/Fournier27/?action=view&current=float.jpg" target="_blank"><img src="http://i3.photobucket.com/albums/y56/Fournier27/float.jpg" border="0" alt="Photobucket"></a>

Me sucede lo que pasa en la primera imagen y deseo que me suceda lo de la segunda.

¿Alguna solución?

métele un margin-left al contenedor que sea como mínimo el ancho del menú

Gracias dagi3d, pero eso ya lo tenía hecho :(

<code>#container
{
font-family: Helvetica, Arial, Geneva, sans-serif;
width: 700px;
color: #333;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
text-decoration: none;
border: 0px solid #333333;
}

#top
{
padding: 0em;
background-color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
}

#navcontainer {
float: left;
position: relative;
}

#navcontainer ul {
margin: 0px;
padding: 0px;
list-style: none;
width: 140px;
font-size: 9px;
position: relative;
/*border-right: 1px solid #000000;*/
}

#navcontainer ul li {
position: relative;
}

#navcontainer ul li a {
display: block;
text-decoration: none;
color: #333333;
padding: 8px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
text-indent: 4px;
background-repeat: no-repeat;
background-position: left center;
background-image: url(images/arrow05.gif);
}

li:hover ul { display: block; }

#navcontainer a:hover {
background-color: #999966;
background-repeat: no-repeat;
background-position: left center;
background-image: url(images/arrow04.gif);
color: #FFFFFF;
}

#content {
margin-left: 140px;
font-size: 12px;
text-align: justify;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #333333;
line-height: 160%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #333333;
background-repeat: no-repeat;
background-position: right bottom;
background-image: url(images/back.jpg);
padding: 20px;
min-height:600px;
height:auto !important;
height:600px;
}

#footer {
/*clear: both;*/
font-size: 9px;
border: 1px solid #333333;
margin-left: 140px;
padding: 8px;
background-color: #999966;
color: #FFFFFF;
background-image: url(images/back02.gif);
background-repeat: no-repeat;
background-position: right top;
margin-top: 0px;
}</code>

Te seria mucho transtorno si pones la pagina en cuestión? es que asi no se que es cada cosa.

La página no estaba subida, pero ya lo he hecho. Perdón again.

Por ejemplo, se ve en esta página (y en toda la sección, claro):

http://www.lavendimia.es/tondonia/spanish/vinos/tondoniaRT.html

Fournier27, a primera vista te dire que tiene pinta de que hay un div u otro elemento mal cerrado.

Te comento una cosa: un id tiene que ser único. Te lo digo porque compruebo que tiene un total de 30 errores de validación, algunos causados por este hecho.

Creo que te falta un div, todo sea dicho de paso... o que lo tienes mal formado, vamos.

Ya valida, pero parece que el problema es otro.

Veamos, el problema lo tienes en la lista de definición...

Ten en cuenta que estas flotando los elementos dt y dd: tendras que realizar un clear: both al final, o te pasara lo que ocurre que el pie se va arriba. ¿O haces el clear?

No tengo mucho tiempo para mirarlo, pero te aseguro que por hay van los tiros: por el flotado que realizas en la lista.

De todas formas me da la impresión de que te estas complicando mucho la vida en cuanto a como lo has planteado.

Fijate que la lista aparece justo de descargas. Y que #navcontainer esta flotado a la izquierda... pero no el contenedor donde metes los contenidos.

Yo lo plantearia de otra manera: flotar a la izquierda tanto el menu principal como la zona esta de descargas, y a la derecha lo que son los contenidos.

Gracias eRNieB.

Lo he probado pero no consigo resultados. Mi duda es... si cabe el contenedor ¿cómo es que no caben los contenidos? ¿por qué le afecta el float del menú?

Estoy perdido.

Me contesto a mi mismo... ya está resuelto el problema, flotado a derecha e izquierda y era sólo un problema con los "margins".

Gracias a eRNieB por su aportación.