Comunidad de diseño web y desarrollo en internet online

Se me queda el footer detras de otro div

Citar            
MensajeEscrito el 30 Ago 2013 05:53 pm
Buenas a todos, no entiendo el porque aparece el footer detras del div bigpicture, si quito ese div siempre queda debajo del head.

Código CSS :

body {
    height:100%;
    background:url(../img/background.jpg);
    font-family:Helvetica, Arial, sans-serif;
    font-size:0.8em;
    font-weight:normal;
    color:red;
    text-align:left;
}

#wrapper {
    width:100%;
    height:100%;
    position:absolute;
    overflow:auto;
    margin:0;
}

#container {
    position:relative;
    width:955px;
    overflow:auto;
    margin:0 auto;
    margin-top:20px;
}

#header {
    width:955px;
    height:152px;
    padding:0;
}

#menu {
    width:955px;
    height:100%;
    background:url(../img/menu.png) repeat-x;
    text-transform: uppercase; 
    font-weight:bold;
}

#menu ul {
    list-style:none; 
    margin:0; 
    padding: 0 0 0 230px;
    height:20px;
}
    
#menu li {
    float:left; 
    padding:65px 20px 65px 20px;   
    color:#d4d5d9;
    line-height: 20px;
}

#menu li:hover{
    color: #ffad00;    
    display:block;    
    text-decoration:underline;
    font-weight:bold;
}

.separation    {background: url(../img/separation.png) no-repeat; background-position: right;}

#bigpicture {
    width: 955px;
    float:left;
    margin-top:20px;
}

#boxes {
    width:955px;
    height:332px;
    float:left;
    margin-top:20px;
}

#box {
    float:left;
    width:304px;
    height:332px;
}

.box1 {background:url(../img/home/blue.png) no-repeat;}
.box2 {margin-left:20px; background:url(../img/home/red.png) no-repeat;}
.box3 {margin-left:20px; background:url(../img/home/green.png) no-repeat;}

.box1 a #picture, .box2 a #picture, .box3 a #picture {width: 304px; height: 332px;}

#footer {  min-height:70px;  margin-top:20px;  background-color:#000000;}  


Código PHP :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>wens film</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="wrapper">
        <div id="container">
            <?php include("header.php")?>
            <div id="bigpicture">
                <img src="img/home/foto_gran.jpg" width="955" height="333" />
            </div>
            <div id="boxes">
                <div id="box" class="box1"><a href="index.php"><div id="picture"></div></a></div>
                <div id="box" class="box2"><a href="index.php"><div id="picture"></div></a></div>
                <div id="box" class="box3"><a href="index.php"><div id="picture"></div></a></div>
            </div>
            <?php include("footer.php")?>  
        </div> <!--container-->                   
    </div> <!--wrapper-->
</body>
</html>

Por mmartines

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 31 Ago 2013 05:59 am
#bigpicture y #boxes están flotando... falta un clear para que #footer no ocupe el espacio "vacio"

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.