CODEWITHSUNDEEP
csshtmlcss-float
Nikk
Nikk

Reputation: 7891

DIV float:left; TROUBLE

I have trouble aligning the div's with the FLOAT:LEFT; tag. Is there something wrong with the code I am overlooking?

The logo is supposed to be at the very left, and the two div bars on top of each other.

Thanks in advance.

<header id="head-01">
    <div class="logo"></div>
    <div class="nav-head-01"></div>
    <div class="nav-head-02"></div>
</header>

header#head-01 {
    clear: both;
    float: left;
    width: auto;
    height: auto;
    display: block;
}
header#head-01 div.logo {
    clear: both;
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 2.5px;
    display: block;
    background-color: rgba(238, 28, 36, 0.4);
}
header#head-01 div.nav-head-01 {
    clear: both;
    float: left;
    width: 880px;
    height: 30px;
    margin-left: 2.5px;
    display: block;
    background-color: rgba(57, 59, 60, 0.3);
}
header#head-01 div.nav-head-02 {
    clear: both;
    float: left;
    width: 880px;
    height: 30px;
    margin-left: 2.5px;
    display: block;
    background-color: rgba(142, 145, 148, 0.3);
}

Upvotes: 1

Views: 113

Answers (2)

Carol
Carol

Reputation: 329

I recommend you to user another div to wrap the 2 navs.

<header id="head-01">
    <div class="logo"></div>
    <div class="nav-wrapper">
    <div class="nav-head-01"></div>
    <div class="nav-head-02"></div>
    </div>
</header>

And then float that div to left:

header#head-01 {
    float: left;
    width: auto;
}
header#head-01 div.logo {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 2.5px;
    background-color: rgba(238, 28, 36, 0.4);
}

.nav-wrapper {
    float: left;
}
header#head-01 div.nav-head-01 {

    float: left;
    width: 880px;
    height: 30px;
    margin-left: 2.5px;
    display: block;
    background-color: rgba(57, 59, 60, 0.3);
}
header#head-01 div.nav-head-02 {
    clear: both;
    float: left;
    width: 880px;
    height: 30px;
    margin-left: 2.5px;
    display: block;
    background-color: rgba(142, 145, 148, 0.3);
}

The result is here

Upvotes: 1

Fenton
Fenton

Reputation: 250922

You are using float to make them appear next to each other, but you are also using clear, which prevents this.

Here is an example that will get you closer. The clears are gone, as are the floats on the two right-hand elements. Instead, a margin-left is added.

header#head-01 {
    float: left;
    width: auto;
    height: auto;
    display: block;
}
header#head-01 div.logo {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 2.5px;
    display: block;
    background-color: rgba(238, 28, 36, 0.4);
}
header#head-01 div.nav-head-01 {
    width: 880px;
    height: 30px;
    margin-left: 62.5px;
    display: block;
    background-color: rgba(57, 59, 60, 0.3);
}
header#head-01 div.nav-head-02 {
    float: left;
    width: 880px;
    height: 30px;
    margin-left: 62.5px;
    display: block;
    background-color: rgba(142, 145, 148, 0.3);
}

Upvotes: 2

Related Questions