CSS element appearing in wrong place

Question

I have the following sample code:

<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
<link rel="stylesheet" type="css" href="style.css">
</head>
<body>
    <div class="left_nav">1 2 3</div>

    <div class="body_main">
        <div class="top_nav_right">Create account Log in</div>

        <div class="top_nav">
            <span>Article Talk</span> <span class="top_nav_right2">Read
                Edit View history</span>
        </div>
</body>
</html>

and in my CSS:

.body_main {
    margin-left: 11em;
}


.top_nav_right {
    float: right;
    margin-top: 1em;
    margin-bottom: 1em;
}

.top_nav {
    height: 2.5em;
    margin-top: 3em;
}


.top_nav_right2 {
    float: right;
}

I'm not sure why "Create account Log in" appears below "Read Edit View history". Those are both divs and I have the Read one following the Create one.

Also, for some reason, only Chrome displays the CSS. I have put the CSS in a validator

does it? http://jsfiddle.net/NVT8A/ – BumbleB2na Mar 07 '13 at 23:42 — BumbleB2na, Mar 07 '13 at 23:42

Axel · Answer 1 · 2013-03-08T15:29:39.253

2

The problem is you are not clearing your floats.

When you float .top_nav_right, it creates a void of space that elements below it are going to try to fill. Since you floated it to the right, the extra space will be on the left of .top_nav_right, which will make .top_nav and it's contents appear on the left (or before).

To fix this, you can simply clear the float produced by .top_nav_right by adding the following CSS definition to .top_nav

clear: both;

You can see the results of the clear here: http://jsfiddle.net/P7QTC/2/

You can learn more about the Why's and How's of clearing floats properly here: http://css-tricks.com/the-how-and-why-of-clearing-floats/

Additionally, you need to be sure to close all of your <div> tags. I noticed that .body_main is missing a closing tag.

edited Mar 08 '13 at 15:29

answered Mar 07 '13 at 23:45

Axel

10,732
2
30
43

Thanks I made those corrections but I still see "Article Talk" and "Read.." on the same line. I want Article and Create sections on the same line, below "Create" – user994165 Mar 08 '13 at 00:21
My apologies. I forgot to add the clear in the JSfiddle. You can find the updated fiddle here: http://jsfiddle.net/P7QTC/2/ – Axel Mar 08 '13 at 15:30

score 1 · Answer 2 · answered Mar 07 '13 at 23:42

1

Part of the problem is that your <link> type is incorrect. It should read type="text/css".

answered Mar 07 '13 at 23:42

Benjamin Cook

21
1

score 1 · Answer 3 · answered Mar 07 '13 at 23:42

1

I think you forgot to close the div tag of the div with the class 'body_main'

answered Mar 07 '13 at 23:42

Greg Oks

2,700
4
35
41

CSS element appearing in wrong place

3 Answers3

Linked