CODEWITHSUNDEEP
htmlcssclearfix
user3005741
user3005741

Reputation: 23

css clearfix isnt working as it supposed to be

I have to floated elements in my div, I used clearfix I found in internet, but it isn't working as it should.

<div id="header" class="clear">
    <div class="header-left"> <a href="#" class="logo"></a> </div>

    <div class="header-right">
        <div class="quick-drop">
            <ul>
                <li class="quicklinks">Quicklinks
                    <img src="images/quicklink-icon.png" />
                </li>
                <li class="dropdown">Select from dropdown
                    <img src="images/dropdown-icon.png" />
                </li>
            </ul>
        </div>

        <div class="search-block">
            <input type="text" class="search" name="search" placeholder="Search for something here" />
        </div>
    </div>

    <div class="header-nav">it should be below but it is under</div>
</div>

CSS

.clear:before, .clear:after {
    content:"\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clear:after {
    clear: both;
}
.header-left {
    float:left;
    margin:40px 0;
}
.header-right {
    float:right;
    margin:40px 0;
}
.logo {
    background:url('../images/logo.png') no-repeat;
    width:250px;
    height:50px;
    display:block;
}
.quick-drop {
    display:inline-block;
}
.quick-drop ul {
    margin:0;
    padding:0;
    margin:18px 0;
}
.quick-drop ul li {
    list-style-type:none;
    display:inline-block;
    height:19px;
    padding:3px;
    text-align:center;
    font-size:12pt;
}
ul .quicklinks {
    color:#c7c7c7;
    border-right:1px #c7c7c7 solid;
}
ul .dropdown {
    color:#58159b;
}
.quick-drop ul li img {
    margin:0 15px;
}
.search-block {
    display:inline-block;
}
.search {
    background:url('../images/search-icon.png') right no-repeat #fff;
    background-position:260px;
    width:260px;
    height:16px;
    border:none;
    outline-color:#58159b;
    padding:15px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color:#c7c7c7;
}

http://jsfiddle.net/qKFAc

The .header-nav should be below the 2 divs, but it is under them, what I'm doing wrong?

Thank you.

Upvotes: 0

Views: 99

Answers (3)

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

.header-nav
{
    clear:left;
}

please add this css rule

Upvotes: 1

David Nguyen
David Nguyen

Reputation: 8528

Clear fixes should be AFTER the floated elements, like so:

Remove the clear class from the parent. Then:

<!-- Floated -->
<div class="clear"></div>
<div class="header-nav">it should be below but it is under</div>

Upvotes: 1

Xarcell
Xarcell

Reputation: 2011

Add this:

.clear {
    clear: both;
}

jsFiddle: http://jsfiddle.net/qKFAc/1/

Upvotes: -1

Related Questions