[SOLUCIONADO] Problema con divs y floats

kiM- · #1 (**permalink**) 16/02/2014, 21:09

Buenas, estoy retomando esto de maquetar webs y la verdad es que los floats SIEMPRE me han dado quebraderos de cabeza.... Explico:

Pretendo hacer una web normal; logo, menú horizontal debajo del logo, justo debajo el contenido y justo al lado del contenido otro apartado para meter más cosas, al final del todo el footer y ya. Bien, he puesto el contenido en float left para que quede a la izquierda y el otro contenido a la derecha... pero por alguna extraña razón no consigo ni que el footer se quede abajo del todo (el texto "footer" queda justo debajo del div content2) ni que el div que tiene el float muestre todo el texto... ¿Alguien podría echarme una mano? Os dejo el html y css:

CSS:

Cita:

body {
margin: auto;
margin-top: 60px;
}
#contenedor {
width: 960px;
margin:0 auto 0 auto;
position: relative;
display:block;
}
#contenedor2 {
background-image: url(images/bgcont.gif)
}
#blueheader {
height: 30px;
background-image:url(images/head.gif)
}
#menu {
text-align: center;
}
#menu ul, li {
display: inline;
font-family: Verdana, Sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
padding-right: 5px;
margin: 0 auto;
}
#content {
width: 600px;
float: left;
padding-top: 10px;
padding-left: 15px;
display:block;
}
#content2 {
width: 320px;
overflow: hidden;
padding-top: 10px;
padding-left: 10px;
padding-right: 15px;
}
h1 {
font-family: Verdana, Sans-Serif;
font-size: 12px;
color: #fff;
font-weight: normal;
}
h2 {
font-family: Verdana, Sans-Serif;
font-size: 5px;
color: #fff;
}
#footer {
width: 960px;
height: 27px;
background-image:url(images/footer.png);
}

HTML:

Cita:

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="contenedor">Content for id "contenedor" Goes Here
<header id="blueheader"></header>
<div id="contenedor2">
<div id="menu">
<ul>
<li>INICIO</li>
<li>TRABAJOS</li>
<li>FOROS</li>
<li>QUIÉNES SOMOS</li>
<li>CONTACTO</li>
</ul>
</div>
<div id="content"><h1>1Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</h1></div>
<div id="content2"><h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</h2></div>
</div>
<footer id="footer">FOOTER</footer>
</div>
</body>
</html>

Saludos y muchas gracias!

Zeromm · #2 (**permalink**) 16/02/2014, 21:42

Crea una clase llamada "clear" que tenga esto

.clear{clear: both;}

Y justo al terminar el div "<div id="contenedor2">" le metes un "<div class="clear"></div>" Y listo.

Si quieres que el .clear tenga compatibilidad con navegadores antiguos utiliza lo que se llama "clearfix", mira por google cual te viene mejor en tu caso.

Sobre el texto.

A mi si me muestra todo el texto http://codepen.io/zeromm/pen/DqKvd

kiM- · #3 (**permalink**) 16/02/2014, 22:47

Vaya, muchas gracias, parece bueno!

Me gustaría saber si hay otra manera de hacer eso que no sea añadiendo un div, suena estúpido pero es para tenerlo limpio, aunque si no la hay usaré esa con gusto!

He usado overflow:hidden en contenedor y contenedor2 y aparentemente ha dado resultado, funciona bien o me dará algún error? Quizás ese no sea el tag correcto...

Zeromm · #4 (**permalink**) 16/02/2014, 23:03

¿Y porque crees que añadir eso es "sucio"?

¿Para que quieres usar el overflow:hidden?

kiM- · #5 (**permalink**) 16/02/2014, 23:23

Ciertamente se me ha ido la cabeza, no sé ni por qué he preguntado eso, pero es que tengo la manía de tener todo en el css y en el .html lo justo, igualmente usaré eso, muchas gracias^^

kiM- · #6 (**permalink**) 16/02/2014, 23:30

Lo cierto es que esta vez no me ha funcionado: He puesto los respectivos floats en "news" y "updates y nada... :\ dejo el código a continuación:

Cita:

@charset "utf-8";
/* CSS Document */
#contenedor {
margin: 0 auto 0 auto;
width: 960px;
margin-top: 50px;
background-image: url(images/bg.png);
}
#header {
background-image: url(images/header.png);
height: 15px;
}
#headerbg {
width: 960px;
}
#logo {
background-image: url(images/logo.png);
width: 128px;
height: 115px;
margin-left: 45px;
}
#menu {
text-align: center;
margin-top: 10px;
margin-bottom: 15px;
}
#menu ul, li {
display: inline;
font-size: 20px;
padding-right: 10px;
color: #333;
}
#news {
width: 600px;
float: right;
}
#updates {
width: 360px;
float: left;
}
#footer {
background-image: url(images/footer.png);
height: 57px;
}
.clear{
clear: both;
}

Cita:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="contenedor">
<header id="header"></header>
<div id="headerbg">
<div id="logo"></div>
</div>
<div id="menu">
<ul>
<li>Inicio</li>
<li>Trabajos</li>
<li>Quiénes somos</li>
<li>Comunidad</li>
<li>Contacto</li>
</ul>
</div>
<div id="news">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="updates">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<footer id="footer"></footer>
</div>
<div class="clear"></div>
</body>
</html>

Saludos!

Zeromm · #7 (**permalink**) 16/02/2014, 23:40

El .clear tienes que ponerlo justo al final del elemto que lleva el float... no al final de todo

kiM- · #8 (**permalink**) 16/02/2014, 23:45

Ufff... muchas gracias, soy un tonto de cuidado :\ y una última pregunta, el .clear lo añado después de cada elemento con float o sólo después del último?

Y si por ejemplo tengo dos divs seguidos, ambos con float, vale con colocarlos después del segundo float o tengo que ponerlo después de cada div?

Saludos y gracias de nuevo!

Zeromm · #9 (**permalink**) 16/02/2014, 23:55

Lo tienes que poner después del último elemento con float

pzin · #10 (**permalink**) 17/02/2014, 03:30

Cita:

Iniciado por kiM-

He usado overflow:hidden en contenedor y contenedor2 y aparentemente ha dado resultado, funciona bien o me dará algún error? Quizás ese no sea el tag correcto...

Realmente te basta con añadir overflow: hidden (o scroll) como comentas, es más limpio y no creas elementos innecesarios.

Después hay otra técnica, que es la más limpia y que nunca te va a dar problemas, llamada micro-clearfix:

Código CSS:

Ver original.cf:before,
.cf:after {
  content: ' ';
  display: table;
}
 
.cf:after {
  clear: both;
}

Y eso ya lo añades al elemento contenedor que no crece:

Código CSS:

Ver original<div id="contenedor" class="cf">

Y ya fuerzas a que se calcule su altura.

kiM- · #11 (**permalink**) 17/02/2014, 09:06

Vaya, muchas gracias!