Elements don't float inside a fixed div?

Question

So, I tried to create 2 floating divs inside a parent div whose position is set to fixed and the 2 children floats to left and right. But for some reson the code is not working as expected. Here is my fiddle: http://jsfiddle.net/adityasingh773/cqn73m0p/ What I tried to achieve is make these 2 children divs float according to their CSS property i.e. to the left and right. I don't like to assign width to each child elements as it will make the code non-responsive. Here is what I tried HTML

<div class="container">
    <nav class="top-nav">
        <section>
            <div class="left">left</div>
            <div class="right">right</div>
        </section>
    </nav>
</div>

And CSS

body{
    margin: 0;
    padding: 0;
}
.container{
    width: 80%;
    margin: 0 auto;
}
nav.top-nav{
    position: fixed;
    top: 0;
    display: block;
}
.left{
    position: relative;
    float: left;
}
.right{
    position: relative;
    float: right;
}

Steve · Accepted Answer · 2015-09-27T19:29:21.327

Your .topnav does not have width. In regards to the fixed nav not confining itself to the container, Fixed position but relative to container will probably help you.

body {
  margin: 0;
  padding: 0;
}
.container {
  width: 80%;
  margin: 0 auto;
}
nav.top-nav {
  position: fixed;
  top: 0;
  left: 0; //added so right is visible
  display: block;
  width: 100%;
}
.left {
  position: relative;
  float: left;
}
.right {
  position: relative;
  float: right;
}

<body>
  <div class="container">
    <nav class="top-nav">
      <section>
        <div class="left">left</div>
        <div class="right">right</div>
      </section>
    </nav>
  </div>
</body>

Thank you! I forgot about that! – Lucky Ali Sep 27 '15 at 19:34 — Lucky Ali, Sep 27 '15 at 19:34

Elements don't float inside a fixed div?

1 Answers1