Problema con DIV y CSS

[juanmanuel19686]

Seguramente será una idiotez que he cometido, pero el cerebro a esta altura ya se me chamusco, tal vez con su experiencia puedan a simple viste ver mi error, les comento:

Tengo un div contenedor dentro del cual necesito colocar tres div con float:left, para lograr un aspecto de celdas de tabla.

Aqui el CSS:

Código:

.servicios {
	width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #0e0e0e;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
.serviciosCuadroIzquierda {
	width: 300px;
	padding: 0px;
	float: left;
	margin-top: 0px;
	margin-right: 30px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.serviciosCuadroMedio {
	width: 300px;
	padding: 0px;
	float: left;
	margin-top: 0px;
	margin-right: 30px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.serviciosCuadroDerecha {
	width: 300px;
	padding: 0px;
	float: left;
	margin-top: 0px;
	margin-right: 30px;
	margin-bottom: 0px;
	margin-left: 0px;
}

Y Aquí el Html:

Código HTML:

<div class="servicios">

<div class="serviciosCuadroIzquierda">
<h3 class="serviciosSubtitulo">Dise&ntilde;o Web</h3>
<p class="serviciosTexto">En materia de dise&ntilde;o web <strong>DINAMICUS</strong> le ofrece una variada cantidad de productos siempre dise&ntilde;ados y programados seg&uacute;n los requerimientos especiales de cada cliente.</p>
<p class="serviciosTexto">Nuestra capacidad operativa nos permite desarrollar todo tipo de sitios o portales, desde web est&aacute;ticas hasta complejos sistemas de gesti&oacute;n en l&iacute;nea, sin descuidar un solo detalle de su instituci&oacute;n o empresa.</p>
</div>

<div class="serviciosCuadroMedio">
<h3 class="serviciosSubtitulo">Web Hosting</h3>
<p class="serviciosTexto">En Internet los sitios deben estar alojados en un servidor las 24 hs conectado, con suficiente capacidad de transferencia de datos y controlados a fin de evitar problemas t&eacute;cnicos, que podr&iacute;an dejar al sitio fuera de l&iacute;nea.</p>
<p class="serviciosTexto">En <strong>DINAMICUS</strong> poseemos poderosos servidores que nos permiten personalizar nuestros servicios conforme las diversas necesidades de los clientes.</p>
</div>

<div class="serviciosCuadroDerecha">
<h3 class="serviciosSubtitulo">Registro de Dominios</h3>
<p class="serviciosTexto">El primer paso para tener un sitio web es registrar un buen nombre de dominio para que sus clientes lo identifiquen y lo encuentren en Internet. El dominio es sencillamente su direcci&oacute;n web.</p>
<p class="serviciosTexto"> En <strong>DINAMICUS</strong> lo asesoraremos y tramitaremos el mejor dominio disponible para su empresa o instituci&oacute;n.</p>
</div>

</div> 

El problema: es que el div con clase

servicios

no envuelve el contenido de los divs con clases

serviciosCuadroDerecha, serviciosCuadroMedio y serviciosCuadroIzquierda

la verdad nose que estoy haciendo mal, la inexperiencia (o novatez jeje) sumado al cansancio hacen que el árbol me tape el bosque.

Con no envuelve quiero decir que los divs interiores con float left si bien quedan alineados al centro fruto del margin-left y margin-right en auto del div servicios (contenedor), lo sobre escriben como si estuvieran encima y no se modifica el height del mismo lo que se evidencia ya que el border bottom del div servicio aparece atrás del texto de los divs con float left.

Espero haberme expresado correctamente y disculpen la soncera de mi pregunta.

[GendeDios]

--
Debes crear una caja vacia que sea empujada por el contenido de las cajas internas ya que los divs son flotantes y no crecen con su contenido por si solos.

Código CSS:

.clear{
clear:both; 
}
 

Código HTML:

<div class="serviciosCuadroIzquierda">
<h3 class="serviciosSubtitulo">Dise&ntilde;o Web</h3>
<p class="serviciosTexto">En materia de dise&ntilde;o web <strong>DINAMICUS</strong> le ofrece una variada cantidad de productos siempre dise&ntilde;ados y programados seg&uacute;n los requerimientos especiales de cada cliente.</p>
<p class="serviciosTexto">Nuestra capacidad operativa nos permite desarrollar todo tipo de sitios o portales, desde web est&aacute;ticas hasta complejos sistemas de gesti&oacute;n en l&iacute;nea, sin descuidar un solo detalle de su instituci&oacute;n o empresa.</p>
<div class="clear"></div>
</div>
 

--

[juanmanuel19686]

Funcionó perfecto de la forma que me dijiste que lo haga, ahora una pregunta tonta y de bruto ambicioso no habría una forma de hacerlo sin necesidad de agregar un DIV vacío ?
Es decir, editando css del contenedor o de los divs contenidos digamos.

Igualmente MUCHAS GRACIAS, puesto que ha funcionado perfectamente !!

[vgonga1986]

overflow: hidden; en el div padre, esta técnica se denomina "limpiar los float", aquí te paso un enlace que lo excplica perfecto:

http://www.librosweb.es/css_avanzado...ar_floats.html

Un saludo.

[GendeDios]

--
Que dato mas interesante hermano. Se le agredece.
--