I have divs under a sticky header but if they are floated the header dosne't stick anymore

Question

I've figured out that the floating elements are what is causing the problem.

Here is my code

#header {
  position: sticky;
}

#main {
  width: 100%;
}

#content {
  width: 50%;
  float: left;
  height: 800px;
  box-sizing: border-box;
  border: solid red;
}

<body>
  <h1 id="header">Header</h1>
  <div id="main">
    <p id="content">words</p>
    <p id="content">words</p>
  </div>
</body>

On my site, I am using the RWD column design by W3 if that is relevant. It just formats the width and floats anything with the specific class.

`overflow: auto;` on main and don't forget top:0 for the sticky element — Temani Afif, Feb 09 '20 at 20:31

score 0 · Accepted Answer · answered Feb 09 '20 at 20:32

0

After using float, you have to use clear

body {
  height: 100%;
}

#header {
  position: sticky;
  top: 0;
}

#main {
  width: 100%;
}

#content {
  width: 50%;
  float: left;
  height: 800px;
  box-sizing: border-box;
  border: solid red;
}

.clear-fix {
  clear: both;
}

<body>
  <h1 id="header">Header</h1>
  <div id="main">
    <p id="content">words</p>
    <p id="content">words</p>
    <div class="clear-fix"></div>
  </div>
</body>

answered Feb 09 '20 at 20:32

Aleksandr Belugin

2,149
1
13
19

thanks so much. I spent three days trying to find an answer. – NinjaPenguin 21 Feb 10 '20 at 12:27
@NinjaPenguin21 in general I recommend not to use `float`, it brings problems. `flexbox` and `grid` suit for layout much much better – Aleksandr Belugin Feb 10 '20 at 16:18

I have divs under a sticky header but if they are floated the header dosne't stick anymore

1 Answers1