CSS trouble with float

Question

I'm having some trouble floating some elements. I've reproduced an example here.

Basically I want Logout to appear on the right (just like the image appears on the left), but am having trouble doing so.

If you swap float: right with float: left and vice-versa in .logo and user-header, Logout still appears on the new row while the logo will correctly float right.

I feel I am missing something obvious here.

Any ideas?

Thanks.

score 2 · Accepted Answer · edited May 23 '17 at 11:51

http://jsfiddle.net/xVXPk/15/

Try this. ( always do float:right, float:left, center, clear:both ) -- note close your image tags.

<div id="header">
        <div class="user-header">
             <label class="user"></label>
              <a class="" href="#">Logout</a>
        </div>
        <div class="logo">
             <a href="index.php"><img src="#"/></a>
        </div>
        <div class="company-header">
            <a title="title" href="index.php"><b>Hello</b></a>
        </div>
        <div style="clear:both; height:1px; width:99%" ></div>
    </div>

#header {
    width: 600px;
    background-color: #585D63;
    padding: 15px 0px;
}

#header .logo {
    float: left;
    margin-left: 30px;
}

#header .logo img {
    height: auto;
}

#header .company-header {
    font-size: 150%;
    letter-spacing: 1px;
    text-align: center;
    width: 200px; 
    margin: 0 auto;
}

#header .user-header {
    float: right;
    margin-right: 30px;
}

#header .user-header a {
    max-width: 120px;
    height: auto;
}

duplicate of this post:

How to align 3 divs (left/center/right) inside another div?

To explain, as far as I understand the issue, when the browser draws the page, it will render the center content, first as it process the page in logical order. then apply the floats this is why the right hangs. But by adding the floats first the browser will know before rendering the center to float the content to the right, because it goes , left center right in the first case, and in the second right left center. If that makes sense. Sort of order of processing operations.

Thanks, simply rearranging the order (left,right,center) of the HTML divs did the trick! Ooops, didn't do enough research for similar problems I guess! Thanks a lot. — Travis Liew, Jul 07 '14 at 03:10
sure I still like right, left, center if I recall some older versions of IE prefer this order, but shouldn't be much of an issue ~ just thought i would mention why i did the right one first, just habit — ArtisticPhoenix, Jul 07 '14 at 03:12

Frank Conijn - Support Ukraine · Answer 2 · 2014-07-07T03:39:19.050

You simply haven't done the math right. There is not enough space for the div class="user-header" to be positioned on the RH-side. See the JSFiddle with borders.

EDIT: and you need to float:left the div class="company-header" as well: live demo.

Used code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Live demo</title>
<style>
div {
    border: 1px solid black;    /* added */
}
#header {
    width: 600px;
    height: 60px;               /* added */
    background-color: #585D63;
    padding: 15px 0px;
}
#header .logo {
    float: left;
    width: 33%;
    max-width: 180px;
    padding: 5px 30px;
}
#header .logo img {
    max-width: 120px;
    height: auto;
}
#header .company-header {
    font-size: 150%;
    letter-spacing: 1px;
    margin: 0 auto;
    width: 33%;
    text-align: center;
    float: left;                /* added */
}
#header .user-header {
    float: right;
    w/idth: 33%;                /* de-activated */
    max-width: 180px;
    padding: 5px 30px;
}
#header .user-header a {
    max-width: 120px;
    height: auto;
}
  </style>
</head>
<body>
    <div id="header">
        <div class="logo">
            <a href="index.php"><img src="#"></a>
        </div>
        <div class="company-header">
            <a title="title" href="index.php">
                <b>Hello</b>
            </a>
        </div>
        <div class="user-header">
            <label class="user"></label>
            <a class="" href="#">Logout</a>
        </div>
    </div>
</body>
</html>

did you try it with lower width? can you show it working like that? — ArtisticPhoenix, Jul 07 '14 at 02:54
i did and it still doesn't work http://jsfiddle.net/xVXPk/16/, however mine does. — ArtisticPhoenix, Jul 07 '14 at 02:57
Changing to lower width didn't work for me either, fixed by moving about the HTML divs. Thanks though! — Travis Liew, Jul 07 '14 at 03:11
@ArtisiticPhoenix: you were right. Something else was needed as well. See the edit. — Frank Conijn - Support Ukraine, Jul 07 '14 at 03:41

Matthew · Answer 3 · 2014-07-07T03:14:20.997

-1

Add class to anchor: <a class="logout" href="#">Logout</a>

css:

#header {
    position: relative;
}

.logout {
    line-height: 58px;  /* Same height as #header */
    position: absolute;
    top: 0;
    right: 30px;  /* Same padding-left of logo */
}

DEMO

edited Jul 07 '14 at 03:14

answered Jul 07 '14 at 03:03

Matthew

2,158
7
30
52

Negative margins, is a bit of a hack - not the proper way to float items, we might as well just absolute position it. – ArtisticPhoenix Jul 07 '14 at 03:07
@ArtisiticPhoenix I absolute-positioned it w/ line-height. – Matthew Jul 07 '14 at 03:14

CSS trouble with float

3 Answers3