Prezados, não estou conseguindo aplicar margin-top ou padding-top nos elementos filhos de acordo com o tamanho do pai. Segundo o que pesquisei, quando aplicamos porcentagem em um elemento, este é aplicado ao controle de acordo com o que fora definido para o primeiro pai do elemento, mas isso não está acontecendo. Abaixo vou publicar tanto o meu html quanto o meu CSS, a fim de que possam me ajudar.
Dentro da minha div footer tenho uma div chamada footer_message, cuja qual contém uma label. Gostaria de centralizá-la verticalmente e, para tanto, preciso que o margin-top seja aplicado em relação ao tamanho do elemento pai, ou seja, em relação à div footer, mas isso não acontece. Reparem que estou aplicando apenas 2% de padding-top na div footer_message, o que já leva a entender que ele o valor não está sendo aplicado em relação ao tamanho da div footer. O que pode estar acontecendo?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%">
<head runat="server">
<title>Framework Beta</title>
<link href="../Content/MasterPage.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body oncontextmenu="return false">
<form runat="server">
<div id="header">
<div id="header_sut">
<asp:Label ID="lblSUT" runat="server" Font-Bold="True" Text=""></asp:Label>
</div>
<div id="header_guest">
Olá Visitante,
<asp:LinkButton ID="libSair" runat="server" CssClass="linkbutton" OnClick="libSair_Click">Sair</asp:LinkButton>
</div>
</div>
<div id="left">
<div id="left_button">
<asp:Button ID="btnIncluir" runat="server" CssClass="botao_incluir" Text="Incluir" OnClick="btnIncluir_Click" />
</div>
<div id="update_panel" runat="server"
onmouseup="HideMenu('contextMenu');"
oncontextmenu="ShowMenu('contextMenu',event);"
class="detailItem">
<div style="display: none;" id="contextMenu">
<table style="cursor: default;"
border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div>
<asp:Button ID="btnDesfazerSelecao" CssClass="botao_context_item" runat="server" Text="Desfazer seleção..." OnClick="btnDesfazerSelecao_Click" />
</div>
</td>
</tr>
</table>
</div>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<div id="conteudo_arvore" runat="server">
<asp:Panel ID="panel_arvore" runat="server" ScrollBars="Auto">
<div id="arvore">
<asp:TreeView ID="tvwCadastro" runat="server" ExpandDepth="0" OnSelectedNodeChanged="tvwCadastro_SelectedNodeChanged" Height="50%"
ImageSet="Msdn" NodeIndent="5" Font-Size="Large" PopulateNodesFromClient="true" OnTreeNodePopulate="tvwCadastro_TreeNodePopulate" populateondemand="true">
<Nodes>
</Nodes>
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="1px" VerticalPadding="2px" />
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle BackColor="White" HorizontalPadding="3px" VerticalPadding="1px" Font-Bold="true" />
</asp:TreeView>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<div id="right">
<asp:Panel ID="pnlRight" runat="server" ScrollBars="Auto">
<asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</div>
<div id="footer">
<div id="footer_message">
<asp:Label ID="lblFooter" runat="server" Text="Qualquer mensagem!"></asp:Label>
</div>
</div>
</form>
</body>
</html>
css:
html, body, form {
margin: 0;
height: 100%;
}
div {
border-radius: 5px;
}
#header {
width: 98%;
height: 10%;
margin: 1% auto 1% 1%;
background-color: #1874CD;
}
#left {
width: 28%;
height: 72%;
/*min-height: 520px;*/
background-color: #1874CD;
float: left;
margin-left: 1%;
margin-bottom: 1%;
}
#right {
width: 69%;
height: 72%;
background-color: white;
float: right;
margin-right: 1%;
/*min-height: 520px;
max-height: 520px;*/
overflow: auto;
margin-bottom: 1%;
}
#footer {
clear: both;
width: 98%;
height: 10%;
margin: 1% auto auto 1%;
background-color: #1874CD;
}
#header_sut {
float: left;
margin-left: 1%;
margin-top: 2%;
font-size: medium;
color: white;
}
#header_guest {
float: right;
margin-right: 1%;
margin-top: 0.5%;
height: 100%;
color: white;
}
.label_inicio {
}
#left_button {
width: 60%;
height: 5%;
margin: 7% auto auto auto;
}
#update_panel {
width: 83%;
height: 79%;
margin: 7% auto 7% auto;
min-height: 79%;
max-height: 79%;
background-color: White;
}
#conteudo_arvore {
width: 100%;
overflow: auto;
}
#panel_arvore {
min-height: 400px;
max-height: 400px;
}
#arvore {
}
#context_item {
border: none;
width: 100px;
background-color: #1874CD;
}
.botao_context_item {
border-radius: 5px;
background-color: #1874CD;
color: white;
}
.botao_incluir {
width: 100%;
}
.botao_incluir:hover {
color: black;
background-color: white;
cursor: pointer;
}
.linkbutton {
color: skyblue;
}
.linkbutton:hover {
color: white;
}
#footer_message {
width: 100%;
text-align: center;
color: white;
padding-top: 2%;
}
