Foros del Web » Creando para Internet » CSS »

Problema con DIV y CSS

Estas en el tema de Problema con DIV y CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/07/2011, 11:08
 
Fecha de Ingreso: septiembre-2010
Ubicación: Corrientes - Argentina
Mensajes: 37
Antigüedad: 6 años, 8 meses
Puntos: 2
Pregunta Problema con DIV y CSS

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
Cita:
servicios
no envuelve el contenido de los divs con clases
Cita:
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.
__________________
Si esta vida te da la espalda, siempre puede tocarle el c...

Última edición por juanmanuel19686; 20/07/2011 a las 11:10 Razón: Falto un Dato...
  #2 (permalink)  
Antiguo 20/07/2011, 11:29
Avatar de GendeDios  
Fecha de Ingreso: mayo-2007
Ubicación: Paraiso de America
Mensajes: 135
Antigüedad: 10 años
Puntos: 10
Respuesta: Problema con DIV y CSS

--
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:
Ver original
  1. .clear{
  2. clear:both;
  3. }

Código HTML:
Ver original
  1. <div class="serviciosCuadroIzquierda">
  2. <h3 class="serviciosSubtitulo">Dise&ntilde;o Web</h3>
  3. <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>
  4. <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>
  5. <div class="clear"></div>
  6. </div>
--
  #3 (permalink)  
Antiguo 20/07/2011, 11:36
 
Fecha de Ingreso: septiembre-2010
Ubicación: Corrientes - Argentina
Mensajes: 37
Antigüedad: 6 años, 8 meses
Puntos: 2
Respuesta: Problema con DIV y CSS

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 !!
__________________
Si esta vida te da la espalda, siempre puede tocarle el c...
  #4 (permalink)  
Antiguo 21/07/2011, 01:26
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 2 meses
Puntos: 252
Respuesta: Problema con DIV y CSS

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.
__________________
¿Alguna pregunta, duda, acotación, nota, cuestión, reparo, comentario, demanda, crítica, interpretación, objeción, interrogante, discrepancia, observación, réplica, disquisición, apostilla o exégesis?
  #5 (permalink)  
Antiguo 21/07/2011, 09:49
Avatar de GendeDios  
Fecha de Ingreso: mayo-2007
Ubicación: Paraiso de America
Mensajes: 135
Antigüedad: 10 años
Puntos: 10
Respuesta: Problema con DIV y CSS

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

Etiquetas: contenido
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:18.