Javascript 为什么不是'；t利润底部：[值]%是否正常工作？
我不明白为什么Javascript 为什么不是'；t利润底部：[值]%是否正常工作？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我不明白为什么页边距底部在.leftBar\u fundo中不能按预期工作。我尝试了#div_leftBar中的所有div，但仍然不起作用。当我在左栏中打开两个或多个div时，它们会展开并最终与页脚重叠。我想在展开div时，页脚也会向下移动。但是marginbottom并没有真正起作用。我使用jQuery使内容出现和消失。HTML代码： <div class="body_container"> <div id="div_header">
页边距底部.leftBar\u fundo#div_leftBar左栏页脚marginbottom<div class="body_container">
<div id="div_header">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example <img src="images/seta.gif" id="seta"/></a>
<ul>
<li><a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="div_leftBar">
<div class="leftBar_fundo">
<div class="leftBar_wrapper">
<ul>
<li class="top_li">
<a class="top_link" href="">OPENS</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li">
<a class="top_link" href="">OPENS</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li">
<a class="top_link" href="">OPENS</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
</ul>
</div>
</div>
</div>
<div class="div_content">
<div class="internal_div_content">
<div class="calendario_container">
<img src="images/calendario/calendario_jul.png" class="calendario_imagem" />
<h4 class="dia_calendario" >14</h4>
</div>
<h1 class="content_title">Título de exemplo</h1>
<hr style="width:100%; position:relative; top:1%" />
<div class="text_div_content">
<p>Ullam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretiuLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede molliUllam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet.
</div>
</div>
</div>
<div id="div_footer">
<div id="footer_socials_container">
<a href="#">
<img src="images/socials/facebook.jpg" id="facebook_img" alt="Facebook" title="Facebook" onmouseover="this.src='images/socials/facebook_hover.jpg'" onmouseout="this.src='images/socials/facebook.jpg'" />
</a>
<a href="#">
<img src="images/socials/twitter.jpg" id="twitter_img" alt="Twitter" title="Twitter" onmouseover="this.src='images/socials/twitter_hover.jpg'" onmouseout="this.src='images/socials/twitter.jpg'" />
</a>
<a href="#">
<img src="images/socials/googlep.jpg" id="googlep_img" alt="Google Plus" title="Google+" onmouseover="this.src='images/socials/googlep_hover.jpg'" onmouseout="this.src='images/socials/googlep.jpg'" />
</a>
<span id="seguir_mensagem">Lorem Ipsum Dolor</span>
</div>
<div id="footer_container">
<div id="col1_container">
<ul id="footer_col1">
<h4>Example:</h4>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</div>
<div id="col2_container">
<ul id="footer_col2">
<h4>Example:</h4>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</div>
<div id="col3_container">
<ul id="footer_col3">
<h4>Example:</h4>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="left_container">
<div id="div_leftBar">
<div class="leftBar_fundo">
<div class="leftBar_wrapper">
<ul>
<li class="top_li">
<a class="top_link" href="">Example</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li">
<a class="top_link" href="">Example</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li">
<a class="top_link" href="">Example</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="div_content">
<div class="internal_div_content">
<div class="calendario_container">
<img src="images/calendario/calendario_jul.png" class="calendario_imagem" />
<h4 class="dia_calendario" >14</h4>
</div>
<h1 class="content_title">Título de exemplo</h1>
<hr style="width:100%; position:relative; top:1%" />
<div class="text_div_content">
<p>Ullam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretiuLorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<!--Added <div class="clear"></div>-->
<div class="clear"></div>
<div id="div_footer">
</div>
$(document).ready(function() {
$('.hidden_ul').hide();
$(".top_link").click(function(){
$(this).toggleClass("active").next().slideToggle("medium");
return false;
});
我应该怎么做才能避免这种情况并使其正常工作？侧栏与页脚重叠的原因是您将#div#u leftBar设置为绝对值。执行此操作时，图元将从流中删除，并且不会朝父图元的高度计算
您需要在css中进行一些重新分解。尝试使用相对位置并将其向左浮动，但不要忘记清除浮动。首先，您必须更改结构。将左、右div放入主容器中 像下面
<div class="body_container">
<div id="div_header">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">Example</a></li>
<li> <a href="#">Example</a></li>
<li> <a href="#">Example</a></li>
<li> <a href="#">Example</a></li>
<li> <a href="#">Example</a></li>
<li> <a href="#">Example <img id="seta" src="images/seta.gif"></a>
<ul>
<li><a href="#">Example</a></li>
<li> <a href="#">Example</a></li>
<li> <a href="#">Example</a></li>
<li> <a href="#">Example</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-content">
<div id="div_leftBar">
<div class="leftBar_fundo">
<div class="leftBar_wrapper">
<ul>
<li class="top_li"> <a class="top_link" href="">OPENS</a>
<ul style="display: none;" class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li"> <a class="top_link" href="">OPENS</a>
<ul style="display: none;" class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li"> <a class="top_link" href="">OPENS</a>
<ul style="display: none;" class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
</ul>
</div>
</div>
</div>
<div class="div_content">
<div class="internal_div_content">
<div class="calendario_container"> <img src="images/calendario/calendario_jul.png" class="calendario_imagem">
<h4 class="dia_calendario">14</h4>
</div>
<h1 class="content_title">Título de exemplo</h1>
<hr style="width:100%; position:relative; top:1%">
<div class="text_div_content">
<p>Ullam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretiuLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede molliUllam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet. </p>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
<div id="div_footer">
<div id="footer_socials_container"> <a href="#"> <img onMouseOut="this.src='images/socials/facebook.jpg'" onMouseOver="this.src='images/socials/facebook_hover.jpg'" title="Facebook" alt="Facebook" id="facebook_img" src="images/socials/facebook.jpg"> </a> <a href="#"> <img onMouseOut="this.src='images/socials/twitter.jpg'" onMouseOver="this.src='images/socials/twitter_hover.jpg'" title="Twitter" alt="Twitter" id="twitter_img" src="images/socials/twitter.jpg"> </a> <a href="#"> <img onMouseOut="this.src='images/socials/googlep.jpg'" onMouseOver="this.src='images/socials/googlep_hover.jpg'" title="Google+" alt="Google Plus" id="googlep_img" src="images/socials/googlep.jpg"> </a> <span id="seguir_mensagem">Lorem Ipsum Dolor</span> </div>
<div id="footer_container">
<div id="col1_container">
<ul id="footer_col1">
<h4>Example:</h4>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</div>
<div id="col2_container">
<ul id="footer_col2">
<h4>Example:</h4>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</div>
<div id="col3_container">
<ul id="footer_col3">
<h4>Example:</h4>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</div>
</div>
</div>
</div>
#div_leftBar#div_leftBar{
width:15%;
min-height:60%;
margin-bottom:30%;
padding:0;
float:left;
}
我通过使用浮点数使其工作。您必须将
.div\u内容.left\u容器float:left<div class="body_container">
<div id="div_header">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example <img src="images/seta.gif" id="seta"/></a>
<ul>
<li><a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li><li>
<a href="#">Example</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="div_leftBar">
<div class="leftBar_fundo">
<div class="leftBar_wrapper">
<ul>
<li class="top_li">
<a class="top_link" href="">OPENS</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li">
<a class="top_link" href="">OPENS</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li">
<a class="top_link" href="">OPENS</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
</ul>
</div>
</div>
</div>
<div class="div_content">
<div class="internal_div_content">
<div class="calendario_container">
<img src="images/calendario/calendario_jul.png" class="calendario_imagem" />
<h4 class="dia_calendario" >14</h4>
</div>
<h1 class="content_title">Título de exemplo</h1>
<hr style="width:100%; position:relative; top:1%" />
<div class="text_div_content">
<p>Ullam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretiuLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede molliUllam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet.
</div>
</div>
</div>
<div id="div_footer">
<div id="footer_socials_container">
<a href="#">
<img src="images/socials/facebook.jpg" id="facebook_img" alt="Facebook" title="Facebook" onmouseover="this.src='images/socials/facebook_hover.jpg'" onmouseout="this.src='images/socials/facebook.jpg'" />
</a>
<a href="#">
<img src="images/socials/twitter.jpg" id="twitter_img" alt="Twitter" title="Twitter" onmouseover="this.src='images/socials/twitter_hover.jpg'" onmouseout="this.src='images/socials/twitter.jpg'" />
</a>
<a href="#">
<img src="images/socials/googlep.jpg" id="googlep_img" alt="Google Plus" title="Google+" onmouseover="this.src='images/socials/googlep_hover.jpg'" onmouseout="this.src='images/socials/googlep.jpg'" />
</a>
<span id="seguir_mensagem">Lorem Ipsum Dolor</span>
</div>
<div id="footer_container">
<div id="col1_container">
<ul id="footer_col1">
<h4>Example:</h4>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</div>
<div id="col2_container">
<ul id="footer_col2">
<h4>Example:</h4>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</div>
<div id="col3_container">
<ul id="footer_col3">
<h4>Example:</h4>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="left_container">
<div id="div_leftBar">
<div class="leftBar_fundo">
<div class="leftBar_wrapper">
<ul>
<li class="top_li">
<a class="top_link" href="">Example</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li">
<a class="top_link" href="">Example</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="top_li">
<a class="top_link" href="">Example</a>
<ul class="hidden_ul">
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
<li><a href="">Example</a></li>
</ul>
</li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
<li class="single_li"><a class="top_link_alone" href="">Example</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="div_content">
<div class="internal_div_content">
<div class="calendario_container">
<img src="images/calendario/calendario_jul.png" class="calendario_imagem" />
<h4 class="dia_calendario" >14</h4>
</div>
<h1 class="content_title">Título de exemplo</h1>
<hr style="width:100%; position:relative; top:1%" />
<div class="text_div_content">
<p>Ullam dictum felis eu pede mollis pretium. Integer tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretiuLorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<!--Added <div class="clear"></div>-->
<div class="clear"></div>
<div id="div_footer">
</div>
#div_leftBar#div_内容#内部#div_内容 .left_container{
min-width:15%;
min-height:60%;
background-color:green;
position:relative;
float:left;
/* Added float:left */
}
#div_leftBar{
width:100%;
position:relative;
margin-bottom:0;
padding:0;
z-index:90;
}
.leftBar_fundo{
background-color:#222;
position:relative;
z-index:90;
}
.leftBar_wrapper{
padding:15% 10% 10% 0%;
position:relative;
z-index:90;
height:100%;
}
.hidden_ul{
margin-top:20%;
padding:0;
position:relative;
overflow:hidden;
clear:both;
z-index:90;
}
.hidden_ul li{
margin-left:20%;
padding:0;
list-style-type:initial;
font-size:14px;
}
.hidden_ul li a:hover{
color:#999;
}
.top_li{
margin:0;
padding:0;
border:2px solid #222;
border-radius:16px;
}
.top_li:hover{
border:2px solid #333;
}
.top_link{
padding-left:15%;
}
.top_link_alone{
padding-left:15%;
}
.single_li{
padding-left:15%;
border:2px solid #222;
border-radius:16px;
}
.single_li:hover{
border:2px solid #333;
}
.leftBar_wrapper ul{
list-style-type:none;
}
.leftBar_wrapper ul li{
padding:8% 0 8% 0;
color:#fff;
}
.leftBar_wrapper ul li:hover{
background-color:#333;
}
.leftBar_wrapper ul li a, visited{
text-decoration:none;
color:#fff;
}
div.div_content{
background-color:green;
width:60%;
min-height:85%;
position:relative;
border:2px solid green;
border-radius:25px;
padding:10px;
margin:0 0 5% 3%;
float:left;
/* Added float:left */
}
/* Added .clear */
.clear{
clear:both;
}
.internal_div_content{
position:relative;
height:100%;
border: 2px solid green;
border-radius:25px;
}
.text_div_content{
margin:3% 0 0 0;
text-align:justify;
text-indent:10%;
}
.calendario_container{
width:90px;
height:90px;
position:relative;
left:6%;
top:1%;
float:left;
z-index:9;
margin-right:0;
padding-right:0;
}
.dia_calendario{
position:absolute;
top:30%;
left:34%;
font-size:23px;
}
.calendario_imagem{
position:relative;
width:90px;
height:90px;
}
h1.content_title{
text-align:center;
}
#div_footer{
background-color:#000;
width:100%;
height: 40%;
position:relative;
padding:0px;
margin-top:0%;
}
#div_footer div ul li a{
text-decoration:none;
color:#777;
}
#div_footer div ul li a:visited{
color:#777;
}
#div_footer div ul li a:active{
color:#555;
}
#div_footer ul {
width: 100%;
float: left;
padding:3% 0 5% 20%;
color:white;
}
#div_footer ul li {
margin:0 0 0 0;
padding:0 0 1% 0;
list-style-type:none;
}
#div_footer div ul li a:hover{
color:#999;
}
#footer_container{
background-color:#000;
width:100%;
position:relative;
top:15%;
height:85%;
margin:0;
padding:0;
}
#col1_container{
position:absolute;
left:0;
height:100%;
width:15%;
}
#col2_container{
position:absolute;
left:14%;
height:100%;
width:15%;
}
#col3_container{
position:absolute;
left:28.5%;
height:100%;
width:15%;
}
#col1_container, #col2_container, #col3_container{
margin:0;
padding:0;
position:absolute;
}
#footer_col1, #footer_col2, #footer_col3{
margin:0;
padding:0;
position:relative;
right:5%;
top:18%;
}