CODEWITHSUNDEEP
css
user257357
user257357

Reputation: 61

could you help me fix this css Bug on my site?

Here is the bug I am trying to fix:

image of bug http://img26.imageshack.us/img26/9008/bild292.png

I have tried everything and am out of ideas now, here's what it should look like:

ideal output http://img809.imageshack.us/img809/3508/bild293.png

The site is: http://mobilova.de/index.php.

Upvotes: 0

Views: 81

Answers (3)

Dan
Dan

Reputation: 10351

You need to clear your floated element. You can use a clear fix as others have suggested or you can simply assign overflow:hidden or overflow:auto to .inside and #red-box. The only thing keeping #red-box from collapsing is the min-height. You will then be able to adjust the margin you have set on the button element and it will now take effect since it has been cleared.

CSS:

#red-box{
overflow:hidden;
}

.inside{
overflow:hidden;
}

Upvotes: 1

rockerest
rockerest

Reputation: 10508

You need to add this clearfix to your CSS:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Then, you need to add clearfix to the classes of div#mf15. This fixed the issue for me.

Upvotes: 0

Morgan Delaney
Morgan Delaney

Reputation: 2439

Is it trying to float? Add the following div below it:

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

Otherwise, the height of your button will not push down the rest of the content.

Upvotes: 0

Related Questions