CODEWITHSUNDEEP
htmlcsscss-float
Darbio
Darbio

Reputation: 11418

CSS float column extending over footer

I am having a problem with my CSS whereby the right hand column in a 2 column layout is extending beyond the footer.

I have tried playing with the clear: both; property but I cannot get it to work..

[image has expired]

the second column has the id column2 both columns use the class column. The footer html has the id footerWrapper

Both columns and footer are div tags.

My CSS (abridged):

.column {
    width: 49%;
}

#column2 {
    width: 50%;
    position: absolute;
    top: 0px;
    margin-left: 50%;
    float: left;
}

#footerWrapper {
    background-color: #333333;
    border-top: 2px #FF6600 solid;
    color: #666;
}

HTML abridged:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
  </head> 
  <body> 
    <div id="mainColumns"> 
      <div id="mainContainer"><div class="mainWrapper"> 
      <h1>Title</h2> 
    </div> 
    <!-- start panels --> 
    <div class="panels"> 
      <div class="column"> 
        <h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2> 
        <div> 
          <p>content</p> 
        </div> 
        <p></p> 
        <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
        <div> 
          <p>content</p> 
        </div> 
        <p></p> 
        <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
        <div> 
          <p>content</p> 
        </div> 
      </div> 
      <div class="column" id="column2"> 
        <h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2> 
        <div> 
          <p>content</p> 
        </div> 
        <p></p> 
        <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
        <div> 
          <p>content</p> 
        </div> 
        <p></p> 
        <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
        <div> 
          <p>content</p> 
        </div> 
      </div> 
    </div> 
    <!-- end panels --> 
    <div class="mainWrapper"></p> 
      </div></div> 
      <div id="sideBar"> </div>
    </div> 
    <div id="footerWrapper"> 
      <div id="footer"> 
        <h6></h6> 
      </div> 
    </div>
  </body> 
</html>

Upvotes: 1

Views: 2635

Answers (5)

Pekka
Pekka

Reputation: 999

In the case of scrollbars, you can add overflow: hidden to your container. It'll keep your escaping content hidden, although it might be better not to hide important information.

Upvotes: 1

Tom
Tom

Reputation: 44553

Try adding clear:both; to your #footerwrapper.

Or, you can manually insert an invisible element to clear the float, e.g. the following at the bottom of div.panels:

<div style="clear:both;"></div>

Upvotes: 2

Tom
Tom

Reputation: 44553

It could be an error caused by editing your HTML to include in the question, but you have a few mismatched <div> tags in there. Check that's all ok in your original.

Upvotes: 0

Jeffery To
Jeffery To

Reputation: 11936

  • Float both columns
  • Remove position, top and margin-left from #column2
  • Add clearfix CSS to your stylesheet
  • Add "clearfix" class to your panels div

Clearfix causes the panels div to wrap both columns, causing to be as tall as the longest column.

Upvotes: 3

SLaks
SLaks

Reputation: 887449

Add overflow: auto to your container.

Upvotes: 2

Related Questions