CODEWITHSUNDEEP
htmlcss
onTheInternet
onTheInternet

Reputation: 7263

Prevent linebreak of floated elements

Im trying to create a header of a website that has the logo left aligned, a navigation div that is 960px wide and centered and a log in area that is right aligned. Here is a screen shot of my progress enter image description here

The issue is that the login breaks to a new line and I don't know how to prevent it. Floating the elements doesn't work.

Here is a Fiddle

But it doesnt produce the same results I'm seeing when I run it locally.

HTML

<div id="header"><!-- Outside Container, Holds Logo and Log In -->
        <div id="logoHolder">
            <p>logo</p>
        </div>
        <div id="navigation">
            <p>navigation</p>
        </div>
        <div id="loginHolder">
            <p>login</p>
        </div>
    </div>

CSS

/*Header Options*/
#header{
    width:100%;
    background-color:green;
    height:125px;
}
    #logoHolder{
        float:left;
    }
    #navigation{

        width:960px;
        background-color:blue;
        margin-left:auto;
        margin-right:auto;
    }

    #loginHolder{
        float:right;
    }

Upvotes: 0

Views: 45

Answers (2)

08Hawkeye
08Hawkeye

Reputation: 246

You've got to be careful with widths. The navigation width is overwhelming the other divs. And, if I'm not mistaken, div has a built in line break. the answer above has one solution, I played with a couple edits also: you can copy in this css:

/Header Options/

header {

width:100%;
background-color:green;
height:125px;

}

logoHolder {

width: 100px;
background-color: red;
float:left;

}

navigation {

width:344px;
background-color:blue;
float:left;

}

loginHolder {

width:100px;
background-color:yellow;
float:left;

}

Upvotes: 0

j08691
j08691

Reputation: 208032

Just re-order your HTML to the following (move loginHolder above navigation) and it works fine:

<div id="header">
    <!-- Outside Container, Holds Logo and Log In -->
    <div id="logoHolder">
        <p>logo</p>
    </div>
    <div id="loginHolder">
        <p>login</p>
    </div>
    <div id="navigation">
        <p>navigation</p>
    </div>
</div>

jsFiddle example

Upvotes: 2

Related Questions