CODEWITHSUNDEEP
csstemplateshtmljoomla
Owl
Owl

Reputation: 689

div overlapping footer despite of style="clear:both"?

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?

Upvotes: 0

Views: 1679

Answers (2)

Diablo Geto
Diablo Geto

Reputation: 467

Use Clear:both instead of clear:all which is not a style definition in MHO.

Upvotes: 1

prezes
prezes

Reputation: 129

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?

Upvotes: 0

Related Questions