Duda html/css

re4q #1 Mar '13

No se desplazar #secundario a la derecha, al lado de principal. Aquí esta el código, haber si podéis echarme un cable.

#contenedorwidth {
width: 770px;
postion:reative;
}
#cabecera {
width: 770px;
height: 120px;
background-color: yellow;
}
#loginForm {
width: 250px;
height: 120px;
background-color: purple;
}
#menu {
width: 770px;
height: 50px;
background-color: green;
}
#principal {
width: 530px;
height: 350px;
background-color: silver;
}
#secundario {
width: 200px;
height: 350px;
background-color: red;
}
#pie {
width: 770px;
height: 30px;
background-color: blue; 
}


body { background-color:#F2F5FE ; }
body { color:#192666 ; }

porcierto el pie de pagina que no se ve en la imagen me interesa tenerla sin ningun salto como sí lo hay entre cabecera y menu.

Sí, se que es muy basico

RaymaN #2 Mar '13 Sureño

Tienes una duda muy básica que con un minuto de búsqueda resuelves.

re4q #3 Mar '13

he probado ya algunas cosillas que decian por google y no acaba de encajar

Nucklear #4 Mar '13 BugHunter

#1 float:right;

#5 Pues haz que el otro vaya a la izda con float:left;

¿Tienes espacio suficiente para poner los dos al lado?

1 respuesta

re4q #5 Mar '13

#4 con lo que dices no se me queda al lado de principal, simplemente se me desplaza un poco a la derecha.

Ya probé estas cosas sino no llegaría a preguntar por aqui XD

gracias de todos modos

si, espacio lo tiene y con el float left del otro no se soluciona :S

1 respuesta

Wasd #6 Mar '13

float left en primario y secundario

alterego #7 Mar '13

prueba con:

#principal {
    display: inline-block;
    vertical-align: top;
    width: 530px;
    height: 350px;
    background-color: silver;
}
#secundario {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    height: 350px;
    background-color: red;
}

Entre principal y secundario hay un margen, si quieres que estén pegados tienes dos opciones:
1- En el html enlazar el final del div #principal con el principio de #secundario en la misma linea, que no haya espacio entre ambos, sin salto de linea, es decir

<div id="principal>
 contenido...
</div><div id="secundario">
contenido....
</div>

2- Puedes optar por darle a #secundario un margin-left negativo para acoplarlo a #principal

También tienes la otra opción como han dicho arriba de meterle float: left a principal y secundario. Que no se te olvide meterle al pie clear: both para romper los floats y que se te quede debajo de estos.

2 2 respuestas