CODEWITHSUNDEEP
cssmenu
Abu Rayane
Abu Rayane

Reputation: 241

CSS: Right menu is coming over the footer

I made a simple website CSS design, the right menu is coming over the footer menu

http://jsfiddle.net/aburayane/ppkdM

 .content{
    border: 10px solid red;
    height: auto;
    min-height: 700px;
}

.menuRight{
    width: 200px;
    float: right;
    overflow: hidden;
    background-color: #CC00CC;
    border: 1px solid green;

}

Thanks for your reply.

Upvotes: 3

Views: 161

Answers (5)

Mussser
Mussser

Reputation: 525

You can either set the max-height: ??px; of .menuRight in CSS, you can set the overflow: hidden; of .content in CSS or you can set the z-indexes of each class in CSS in order to decide which div shows above each other div.

Upvotes: 2

user2228392
user2228392

Reputation: 404

there are another tips to finish what you want to do. it is negative margin. you want Two columns of the same height.we can do something as follow:

 <div class="content" style="overflow: hidden;">
    <div class="content-wrap" style="padding-top: 9999px; margin-top: -9999px;">
        <div class="col1"></div>
        <div class="col2"></div>
    </div>
</div>

check the code at jsfiddle

haha..sorry, maybe you want to clear float.we can do this easily as follow:

 .content:after {
      content: '';
      display: block;
      clear: both;
 }

Upvotes: 2

agconti
agconti

Reputation: 18093

Because your right menu is floating, you need to add a clearfix.

Try adding this to the content div:

.group:after {
  content: "";
  display: table;
  clear: both;
}

working example : http://jsfiddle.net/agconti/ppkdM/2/

This is the best practice way to do it. You can add this class to any element that you're floating to solve similar issues in the future. Additionally the link above will tell you all you need to know about it.

If you use overflow: hidden you'll end up hiding some of the content from your menu, which is baadd mmm'kay.

Upvotes: 2

beautifulcoder
beautifulcoder

Reputation: 11330

To clear the right menu you may set clear:both in footer.

http://jsfiddle.net/ppkdM/1/

Upvotes: 2

EfrainReyes
EfrainReyes

Reputation: 991

Set overflow: hidden on the .content selector.

.content{
    border: 10px solid red;
    height: auto;
    min-height: 700px;
    overflow: hidden;
}

Upvotes: 1

Related Questions