How do I position two divs in relation to a third (fixed)?

Question

How do I position two divs in relation to a third (fixed)?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I want two divs to fall below a third that has position: fixed , the problem is that these divs are behind the third, already tried to change the position of the two divs to relative, absolute and static, but it does not work. p>

HTML

<!DOCTYPE HTML>
<html>
<head>
<title>blogg</title>
<link type="text/css" rel="stylesheet" href="MeuCss.css">
</head>

<body>
<div id = "header">
    <p id = "nome">Titulo/Logo</p>
    <p class = "data">dd/mm/aaaa</p>
    </div>
    <div class = "left"></div>
    <div align="left"></div>
    <div class = "right"></div>
    <div id = "footer"></div>
    <div class = "divLink">
    <a href = "http://www.facebook.com"></a>
    </div>
    </body>
</body>
</html>

CSS

div{
    border-radius: 5px;   
}

#header{
    z-index: 1;
    font-family: Arial;
    width: 97.5%;
    height: 50px;
    background-color: #FFCC99;
    margin-top: -15px;
    position: fixed;
margin-bottom: 7px;
}

.data{
    float:right;    
margin-right: 5px;
}

.left{
display:inline-block;
    width: 100px;
    height: 300px;
    background-color: #99CCFF;
    float: left;
    margin-bottom: 7px;
margin-right: 7px;
}

.right{
margin-left: 7px;
margin-bottom: 7px;
width: 300px;
height: 300px;
background-color: #00CC99;
float: left;
}

#footer{
    position: relative;
    clear: both;
    height: 50px;
    background-color: #0066FF;
    width: 98.5%;
    margin-bottom: 5px;

}

#nome{
    margin-left: 5px;   
    color:#009999;
    float: left;
display: inline-block;
}

#email{
    margin-right: 5px;
    float: right;
    color:#009999;
}   

.divLink{
    position: static;   
    width: 50px;
    height: 50px;    
}

.divLink a{
    display: block;
    background-image: url("http://goo.gl/xPi76J");
    background-size: 50px 50px;
background-repeat:no-repeat;
    width: 50px;
    height: 50px;
    border-radius:5px;
}



.divLink a:hover{
    display: block;
    border-radius: 5px;
    background-image: url("http://goo.gl/9t07bt");
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
background-repeat:no-repeat;
}

Result:

html css posicionamento

asked by anonymous 20.06.2014 / 19:20

2 answers

0

You can give margin-top to divs that you want to be down.

Example:

link

20.06.2014 / 19:30

API Level disagrees Flag Reload / Cache WinInet

score 1 · Accepted Answer

Friend, do so:

Add a div around everything, you can call it .wrap
In this div, add a margin-top or padding-top of the same size as the div that has position fixed.

In this way, the content of the page will always begin below .header ;)