[SOLUCIONADO] Problema con DIV's lado a lado (float) + height!

S1n1struu · #1 (**permalink**) 03/05/2015, 06:12

Hola muy buenas.. soy nuevo en esto y tengo un problema a la hora de poner 2 DIV lado a lado.. me explico..

Tengo un DIV=content que es mi "cuerpo principal" donde va todo.
Dentro tengo el Encabezado "header", el MENU "menu", PRINCIPAL "principal" () estos son los que van lado a lado.. y por ultimo el PIE "footer".

Cuando pongo "menu" con float:left el "principal" se me pega a el sin respetar los margenes que tengo a 1px todo.

También no entiendo porque mi height:100% de content no funciona!

Aquí os dejo mi código y el CSS:

////////////////////////////////////////////////////////////////////////////////////////////////////////
<body>

<div id="content">

<div id="header">
header header header header header header header header header header header header header
header header header header header header header header header header header header header
</div>

<div id="menu">
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
</div>

<div id="principal">
principal principal principal principal principal principal principal principal principal
principal principal principal principal principal principal principal principal principal
principal principal principal principal principal principal principal principal principal
principal principal principal principal principal principal principal principal principal
</div>

<div id="footer">

<h4>FOOTER</h4>

</div>

prueba content
</div>

</body>
////////////////////////////////////////////////////////////////////////////////////////////////////////

body {background:gray;
}

h4 {font-family:Verdana;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
}
/********************************************/
#content {background:white;
width:80%;
height:100%;
margin:0 auto 0 auto;
}
/********************************************/
#header {background:silver;
height:15%;
margin: 1px 1px 1px 1px;
}
/********************************************/
#menu {background:silver;
width:30%;
height:70%;
float:left;
margin: 1px 1px 1px 1px;
}
/********************************************/
#principal {background:silver;
width:80%;
margin: 1px 1px 1px 1px;
}

#principal:before {
margin-left:5px;
}
/********************************************/
#footer {background:silver;
height:15%;
text-align:center;
margin: 1px 1px 1px 1px;
position:relative;
clear:both;
}

////////////////////////////////////////////////////////////////////////////////////////////////////////

A ver si me podéis echar un cable.. gracias!

NueveReinas · #2 (**permalink**) 03/05/2015, 08:14

Hola, bienvenido a FDW. Por favor, utiliza Highlight del foro, así no leemos código en texto plano.
Se agradecería que también uses JSFIDDLE.

S1n1struu · #3 (**permalink**) 03/05/2015, 08:37

De acuerdo, los próximos posts utilizare Highlight.

El enlace de JSFDDLE os dejo aquí:

[URL="https://jsfiddle.net/rw6z9Lr1/"]https://jsfiddle.net/rw6z9Lr1/[/URL]

[JSFIDDLE="https://jsfiddle.net/rw6z9Lr1/"][/JSFIDDLE]

Gracias.

fede5426 · #4 (**permalink**) 03/05/2015, 13:25

En el jsfiddle que pasaste, tu "principal" tiene 456px de margen izquierdo, quitaselo y agregale float:left;

http://codepen.io/anon/pen/aOOxNG

S1n1struu · #5 (**permalink**) 03/05/2015, 16:16

Cita:

Iniciado por fede5426

En el jsfiddle que pasaste, tu "principal" tiene 456px de margen izquierdo, quitaselo y agregale float:left;

[url]http://codepen.io/anon/pen/aOOxNG[/url]

Sí fede5426, ya lo he cambiado y agregado el float:left pero me queda pegado al "menu".. y no quiero que se me quede pegado ..

[JSFIDDLE="https://jsfiddle.net/rw6z9Lr1/3/"][/JSFIDDLE]

lauser · #6 (**permalink**) 03/05/2015, 16:53

Siempre que sea posible, el código se pone en el foro.
JSFDDLE se utiliza en situaciones puntuales (por ejemplo, código muy extenso).

fede5426 · #7 (**permalink**) 03/05/2015, 17:45

Cita:

Iniciado por S1n1struu

Sí fede5426, ya lo he cambiado y agregado el float:left pero me queda pegado al "menu".. y no quiero que se me quede pegado ..

[JSFIDDLE="https://jsfiddle.net/rw6z9Lr1/3/"][/JSFIDDLE]

Cambiale float:left por float:right, o usa un margin-left para el principal.. en ambos casos vas a tener que reducir ese 70% de width por un poco menos.

S1n1struu · #8 (**permalink**) 04/05/2015, 02:05

Cita:

Iniciado por fede5426

Cambiale float:left por float:right, o usa un margin-left para el principal.. en ambos casos vas a tener que reducir ese 70% de width por un poco menos.

Muchas gracias! fede5426
Solucionado.

fede5426 · #9 (**permalink**) 04/05/2015, 05:32

De nada, un gusto..

Saludos