Tema: Problema con divs y floats
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/02/2014, 21:09
Avatar de kiM-
kiM-
 
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Problema con divs y floats
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!