Foros del Web » Creando para Internet » CSS »

poner div al lado del otro

Estas en el tema de poner div al lado del otro en el foro de CSS en Foros del Web. tengo este estilo @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original .contenedor { width : 600px ; margin : 0 auto 0 auto ; background-image : url ...
  #1 (permalink)  
Antiguo 22/06/2011, 15:51
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.409
Antigüedad: 15 años, 9 meses
Puntos: 20
poner div al lado del otro

tengo este estilo

Código CSS:
Ver original
  1. .contenedor{
  2. width: 600px;
  3. margin: 0 auto 0 auto;
  4. background-image: url("fondo.png");
  5. top: 0px;
  6. -moz-border-radius: 10px;
  7. -webkit-border-radius: 10px;
  8. behavior:url(border-radius.htc);
  9. }
  10. .head{
  11. width: 292px;
  12. height: 150px;
  13. float: left;
  14. }
  15. .cuadro_titulo{
  16. position: relative;
  17. width: 300px;
  18. margin-left:5px;
  19. font-family: "palatino linotype",palatino,serif;
  20. color: #0011FF;
  21. font-size: 40px;
  22. font-weight: bold;
  23. font-variant: small-caps;
  24. float: left;
  25. }

y lo estoy poniendo en mi html asi

Código HTML:
Ver original
  1. <div class="contenedor">
  2. <div class="head"><img src="http://organizacioneverest.com/sitio/templates/businessblue/images/header-object.png" width="292" heigth="150" /></div>
  3.     <div class="cuadro_titulo">Red Optimus 2.0</div>
  4.    
  5. </div>
  6. </body>

De esta forma logro que me aparezcan "cuadro_titulo" al lado de "head", pero resulta que no me sale el fondo de "contenedor", si le agrego float: left; a .contenedor si me aparece el fondo pero me lo tira a la izquierda (es apenas obvio) y yo lo necesito es centrado porque alli va el contenido de mi pagina, sin el float: left; en .contenedor se ve centrado pero sin el fondo, como puedo lograr para que me quede centrado y con el fondo?
__________________
Say no more.......
  #2 (permalink)  
Antiguo 22/06/2011, 15:56
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 8 años, 8 meses
Puntos: 105
Respuesta: poner div al lado del otro

usa overflow: hidden;

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #3 (permalink)  
Antiguo 22/06/2011, 16:00
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: poner div al lado del otro

Sobre .contenedor:
no se ve el fondo porque su height es igual a cero. quitale float:left y ponle margin:0 auto; junto a un doctype.
Su height es igual a cero porque tiene elementos flotados en su interior, para solucionar esto debes añadirle overflow:hidden; con esto consigues que su height dependa de su hijo flotado más alto. acá un ejemplo.

Saludos.
  #4 (permalink)  
Antiguo 22/06/2011, 16:01
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.409
Antigüedad: 15 años, 9 meses
Puntos: 20
Respuesta: poner div al lado del otro

no, ya lo solucione solo fue cuestion de definir bien las coordenadas aqui esta el modificado

Código CSS:
Ver original
  1. .contenedor{
  2. position: absolute;
  3. width: 600px;
  4. left: 50%;
  5. margin-left: -300px;
  6. background-image: url("fondo.png");
  7. top: 0px;
  8. -moz-border-radius: 10px;
  9. -webkit-border-radius: 10px;
  10. behavior:url(border-radius.htc);
  11. float:left;

y aqui el enlace de referencia http://www.programacionweb.net/artic...iculo/?num=461

Espero haber sido util
__________________
Say no more.......
  #5 (permalink)  
Antiguo 22/06/2011, 16:04
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: poner div al lado del otro

en todo caso lo emparchaste. ya que si usas position absolute no tiene sentido que uses float.
Además ese truco del margin-left en oposición a left puede solucionarse facilmente usando un padre relativo.
saludos.

pd: ahh, explicame que harás con esos 300px en otra resolución.

Última edición por cristian_cena; 22/06/2011 a las 16:10
  #6 (permalink)  
Antiguo 22/06/2011, 16:15
 
Fecha de Ingreso: febrero-2010
Ubicación: Montevideo
Mensajes: 105
Antigüedad: 7 años, 1 mes
Puntos: 19
Respuesta: poner div al lado del otro

Si, como dice Cristian hay varias cosas que debes emprolojar de ese código. El float lo podés sacar ya que estás usando posición absouta. La posición absoluta siempre te conviene hacerla relativa a un contenedor, si no lo especificas será absoluta en relación al documento, osea al browser, un cambio de tamaño de la ventana y todo se va al diablo.

Yo pondría además la propiedad border-radius al final de las específicas de mozilla y webkit.
__________________
Federico Silva Ponte
www.fedesilva.com

Etiquetas: lado
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 14:25.