div overlapping footer despite of style=“clear:both”?
Question
I am writing my own template for joomla 2.5.6. I am not sure if this issue is Joomla or simply css related.
The template is simple, it has a sidebar on the left and content on the right, and a footer. Now when the content is short and there are several modules on the sidebar, the modules overlap the footer.
It looks like this:
http://imageshack.us/photo/my-images/269/screenshotmdph.jpg/
The html from index.php looks like this:
<body>
<div class="container_6">
<div class="grid_6 header">
<a href="<?php echo $this->baseurl ?>" title=""><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/assets/images/logo.png" alt="home" id="logo"/></a>
<jdoc:include type="modules" name="menu" />
</div>
</div>
<div class="container_6">
<div class="grid_6 head_logo">
<jdoc:include type="modules" name="header_logo" />
<div class="left_menu">
<div class="left_menu_content">
<jdoc:include type="modules" name="left_menu" style="xhtml" />
</div>
</div>
<div class="right_module">
<jdoc:include type="modules" name="right" />
</div>
</div>
</div>
<div class="container_6">
<div class="grid_6">
<div class="content">
<div class="content_holder">
<!-- beginn content -->
<div class="container_6">
<div class="content_component">
<jdoc:include type="modules" name="breadcrumb" />
<jdoc:include type="component" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="container_6">
<div class="grid_6">
<div class="footer">
</div>
</div>
</div>
I have used the 960-grid system which has the class clear on it, but the other classes are defined here:
.header {
background: url('../images/top.png') no-repeat;
height:93px;
width:100%;
}
.head_logo {
background: url('../images/shadow.png') repeat-y;
padding-right:10px;
padding-left:12px;
z-index:1;
position:absolute;
}
.left_menu {
background: url('../images/menuBg.png') no-repeat;
width:284px;
min-height:611px;
top:300px;
z-index:2;
position:absolute;
}
.right_module {
width:180px;
height:40px;
padding:10px;
background-color:#e9e9e9;
top:300px;
left:730px;
z-index:3;
position:absolute;
}
.content {
background: url('../images/shadow.png') repeat-y;
min-height:500px;
}
.content_holder {
background-color:#e9e9e9;
width:960px;
margin-left: auto;
margin-right: auto;
min-height:500px;
}
.content_component {
width:666px;
padding:5px 5px 5px 284px;
margin:0 5px;
}
#logo {
margin:15px 0 0 25px;
float:left;
}
.footer{
background: url('../images/bottom.png') no-repeat;
width:100%;
height:92px;
}
I am lost with this, because it should work because of the clearing class above the footer, but it doesn't.. Unfortunatedly I have no online example, its all local
Anybody an idea how I could find the error? Thank you so much
ADDITIONAL INFORMATION:
Sorry, I forgot, the
<div class="clear"></div>
Is defined in the grid.css, and looks like this:
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
I edited the question title also, sorry was wrong
Addition!!
I wanted to add a screenshot of the problem. Please look here:
http://www.bilder-hochladen.net/files/jegt-i-6f49-jpg.html
You see, the .left-menu is positioned with absolute and begins inside the .head-logo class. The .left-menu should not go inside the purple footer.
How can I tell the content divs to be equal in height with the left-menu?
2 answers
solution1
1 2012-09-13 06:47:30
使用Clear:both而不是clear:all ，这不是MHO中的样式定义。
solution2
0 2012-09-13 11:10:06
From what it seems, you may be placing the 'clear' div in a wrong place, but it's hard to say, not seeing the actual page with all the css attached, including the grid ones. Maybe you would be able to actually generate the page, save to your local disk and put it online?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.