poner div al lado del otro

el_cesar · #1 (**permalink**) 22/06/2011, 15:51

tengo este estilo

Código CSS:

Ver original.contenedor{
width: 600px;
margin: 0 auto 0 auto;
background-image: url("fondo.png");
top: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior:url(border-radius.htc);
}
.head{
width: 292px;
height: 150px;
float: left;
}
.cuadro_titulo{
position: relative;
width: 300px;
margin-left:5px;
font-family: "palatino linotype",palatino,serif;
color: #0011FF;
font-size: 40px;
font-weight: bold;
font-variant: small-caps;
float: left;
}

y lo estoy poniendo en mi html asi

Código HTML:

Ver original<body>
<div class="contenedor">
<div class="head"><img src="http://organizacioneverest.com/sitio/templates/businessblue/images/header-object.png" width="292" heigth="150" /></div>
    <div class="cuadro_titulo">Red Optimus 2.0</div>
    
</div>
</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?

masterojitos · #2 (**permalink**) 22/06/2011, 15:56

usa overflow: hidden;

Suerte

cristian_cena · #3 (**permalink**) 22/06/2011, 16:00

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.

el_cesar · #4 (**permalink**) 22/06/2011, 16:01

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

Código CSS:

Ver original.contenedor{
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
background-image: url("fondo.png");
top: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior:url(border-radius.htc);
float:left;

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

Espero haber sido util

cristian_cena · #5 (**permalink**) 22/06/2011, 16:04

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.

fedesilva · #6 (**permalink**) 22/06/2011, 16:15

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.