Navbar element affected by float rule of an element in another div

Question

I'm trying to code a simple website with a navbar under the header. The problem is that the position of the navbar elements is directly influenced by the length of the header element, but only when the header element has a float:left css rule.

The two elements are in separate divs and don't share any css rules.

I've already tried using justify-content, align-items, margin: auto etc. It seems as if the only way to fix the issue is to remove the float:left rule from the header text, but I need to keep it.

html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="style.css" />
<head runat="server">
    <title>Lewis</title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="header-bar">
            <h1>Lewis' Website</h1>
            <img src="images/headericon.jpg" />
        </div>
        <div id="navbar">
            <nav>
                <a href="index.aspx"> Home </a>
                <a href="about.aspx"> About </a>
                <a href="blog.aspx"> Posts </a>
            </nav>
        </div>
    </form>
</body>
</html>

css

#header-bar img {
    width:  150px;
    height: 150px;
    border-radius: 50%;
    padding-right: 10%;
    padding-left: 10%;
}

#header-bar h1 {
    font-family: Arial;
    font-size: 70px;
    color: white;
    padding-left: 10%;
    float: left;
}

#navbar {
    background-color: white;
    margin: 0px;
}
#navbar nav a {
    font-size: 35px;
    margin: 0 15px;
}

add `oveflow: hidden` to `header-bar`... when you use *floating containers* you have to *clear* it... see [explanation here](https://stackoverflow.com/questions/39311775/make-column-and-main-content-stay-on-left-or-right-as-browser-is-resized/39313556#39313556) — kukkuz, Apr 19 '19 at 06:15
another interesting behaviour when you don't *clear* floats - see https://stackoverflow.com/questions/39684091 — kukkuz, Apr 19 '19 at 06:27

score 1 · Accepted Answer · edited Apr 19 '19 at 06:24

1

Here is your CSS now fix it as per your design requirement.

#form1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

edited Apr 19 '19 at 06:24

Jonathan Southern

1,121
7
22

answered Apr 19 '19 at 06:11

codeuix

1,366
1
12
18

Navbar element affected by float rule of an element in another div

1 Answers1