The sticky position is failing to function properly when I set the float property to the left on other

Question

The sticky position is failing to function properly when I set the float property to the left on other

I noticed that the position sticky for the header stops working once I add float:left to another element. The tricky part is, if I remove the float:left from main>div, the sticky header works fine. Despite my efforts to find a solution through Google, no luck so far. Below is the code snippet:

<!doctype html>
<html lang="en">

<head>
    <style>
        .header {
            height: 100px;
            position: sticky;
            top: 0;
            width: 100%;
            background-color: pink;
        }

        main>div {
            float: left;
            /*If I don't use it, the sticky header works*/
            height: 1500px
        }

        .first {
            background: linear-gradient(to top, red, yellow);
            width: 300px;
            top: 0;
        }

        .second {
            background: linear-gradient(to top, khaki, gray);
            width: calc(100% - 600px);
        }

        .third {
            background: linear-gradient(to top, tomato, green);
            width: 300px;
        }
    </style>
</head>

<body>
    <header class="header">
        sticky header
    </header>
    <main>
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
    </main>

</body>

</html>

You can view and test the same code on Jsfiddle here.

html css css-float css-position sticky

Answer 1

Answer №1

Whenever you create a “float” element, it is essential to clear it afterwards.

To achieve this, consider inserting the following line below:

    <div style="clear:both;"></div>

By including the above code snippet, your final result will look like the example provided below. Don’t hesitate to move the styling to an external class if needed.

    <header class="header">
    sticky header
</header>
<main>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</main>
<div style="clear:both;"></div>

You can also utilize a pseudo-element (such as "after" in CSS) to accomplish the same effect [here](https://www.w3schools.com/cssref/sel_after.asp).

Answer 2

Whenever you create a “float” element, it is essential to clear it afterwards.

To achieve this, consider inserting the following line below:

    <div style="clear:both;"></div>

By including the above code snippet, your final result will look like the example provided below. Don’t hesitate to move the styling to an external class if needed.

    <header class="header">
    sticky header
</header>
<main>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</main>
<div style="clear:both;"></div>

You can also utilize a pseudo-element (such as "after" in CSS) to accomplish the same effect [here](https://www.w3schools.com/cssref/sel_after.asp).

Answer 3

Answer №2

If you are designing a layout, it's advisable to utilize the -x-sticky property for cross-browser compatibility and set your column widths in percentages to ensure responsiveness.

For instance, execute the code snippet below:

body{
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
header {
   height: 60px;
   width: 100%;
   background-color: pink;
   position: -webkit-sticky;
   position: -ms-sticky;
   position: -moz-sticky;
   position: -o-sticky;
   position: sticky;
   top: 0px;
   z-index: 1;
}
main {
   display: flex;
   width: 100%;
   height: 1500px;
}
.first {
   background: linear-gradient(to top, red, yellow);
   min-width: 20%;
}
.second {
   background: linear-gradient(to top, khaki, gray);
   flex-grow: 1;
}
.third {
   background: linear-gradient(to top, tomato, green);
   min-width: 20%;
}

   <header>
      sticky header
   </header>
   <main>
      <div class="first"></div>
      <div class="second"><p>Lorem ipsum dolor sit amet consectetur adipiscing elit, vitae tincidunt nascetur donec porttitor aenean et nunc, ut dictum inceptos facilisis commodo cum. Duis magnis parturient sollicitudin diam augue placerat imperdiet neque, euismod cum nostra erat lacus et conubia, facilisi pellentesque molestie risus mus dapibus vel. Malesuada vestibulum habitasse class sodales viverra mauris fermentum tortor massa bibendum augue libero, euismod montes sed dis magna vel leo praesent mattis platea eleifend. Neque commodo maecenas odio curae cubilia potenti habitant congue porttitor, integer libero mattis nisl sed mauris donec litora magnis, nulla dignissim platea hac dui varius tellus tincidunt.</p> <p>Dignissim proin arcu magna vitae id nam volutpat natoque semper sem, aliquet erat aliquam sociosqu scelerisque eget urna mollis sagittis. Posuere arcu sociosqu mi ad lacinia vitae ac nascetur tempor pharetra aptent fringilla, turpis sodales himenaeos malesuada mattis nisl diam sapien quisque cum. Enim dictum etiam mollis egestas et magna blandit dignissim, ullamcorper parturient odio suspendisse curabitur habitasse dui facilisi, laoreet ridiculus est ad vehicula curae nullam.</p> <p>Facilisis odio mauris consequat mattis faucibus aliquam eu semper condimentum, imperdiet natoque magna leo malesuada lacinia posuere placerat tellus, suscipit dapibus pharetra porta eros diam feugiat dictum. Suscipit euismod fermentum interdum bibendum nullam porttitor, pharetra dis mollis vivamus leo elementum commodo, facilisi rhoncus aptent ligula maecenas. Sodales pellentesque purus parturient mollis mauris tellus id vehicula, velit ac quam sociosqu molestie sollicitudin neque eleifend, mus porttitor aenean penatibus libero fringilla sagittis.</p> <p>Phasellus ornare eros per nam sollicitudin taciti himenaeos, senectus auctor fusce varius magna hendrerit. Urna proin lacus conubia tortor venenatis mauris nec facilisi, fringilla arcu non accumsan pellentesque neque ut dictum euismod, curae tempor eu felis habitasse mi dui. Viverra vehicula ultrices etiam maecenas fusce pulvinar dis sem litora, luctus molestie suscipit tristique imperdiet gravida pretium augue, vel velit nibh hac mus nam consequat eros.</p> <p>Metus feugiat nisl felis fames condimentum facilisi posuere tempus ultricies scelerisque porttitor aptent, justo tempor magnis ultrices phasellus cras nascetur interdum augue aenean iaculis. Lacinia diam lectus lacus facilisis nisl accumsan magna curae nullam placerat bibendum dictum, vehicula dui integer non viverra iaculis interdum vitae at suscipit egestas. Ac aptent fermentum netus eros vulputate phasellus iaculis, cum inceptos velit suspendisse morbi viverra, ante fringilla faucibus donec placerat nullam. Aliquam diam integer vivamus ligula nam cras cursus tristique libero, mattis nisi vestibulum litora enim suspendisse inceptos fames facilisi, erat penatibus ridiculus taciti duis bibendum tortor ornare.</p> <p>Lectus dui sagittis et nascetur nec hendrerit convallis, dapibus curabitur fermentum varius scelerisque nullam platea, metus elementum mattis id semper dignissim. Ridiculus habitasse at sociosqu gravida dui metus velit aptent praesent, dapibus purus egestas et diam nisi pulvinar porttitor, ullamcorper hac integer cubilia sagittis lobortis justo tristique. Penatibus diam convallis velit sapien, ornare nascetur morbi laoreet vulputate, vitae lectus potenti.</p> <p>Egestas nostra mus montes suscipit morbi mattis vestibulum, sapien penatibus laoreet luctus eu feugiat. Integer a fringilla aenean quisque diam nostra, nisl volutpat commodo augue gravida massa, praesent elementum pulvinar curabitur proin.</p></div>
      <div class="third"></div>
   </main>

Answer 4

If you are designing a layout, it's advisable to utilize the -x-sticky property for cross-browser compatibility and set your column widths in percentages to ensure responsiveness.

For instance, execute the code snippet below:

body{
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
header {
   height: 60px;
   width: 100%;
   background-color: pink;
   position: -webkit-sticky;
   position: -ms-sticky;
   position: -moz-sticky;
   position: -o-sticky;
   position: sticky;
   top: 0px;
   z-index: 1;
}
main {
   display: flex;
   width: 100%;
   height: 1500px;
}
.first {
   background: linear-gradient(to top, red, yellow);
   min-width: 20%;
}
.second {
   background: linear-gradient(to top, khaki, gray);
   flex-grow: 1;
}
.third {
   background: linear-gradient(to top, tomato, green);
   min-width: 20%;
}

   <header>
      sticky header
   </header>
   <main>
      <div class="first"></div>
      <div class="second"><p>Lorem ipsum dolor sit amet consectetur adipiscing elit, vitae tincidunt nascetur donec porttitor aenean et nunc, ut dictum inceptos facilisis commodo cum. Duis magnis parturient sollicitudin diam augue placerat imperdiet neque, euismod cum nostra erat lacus et conubia, facilisi pellentesque molestie risus mus dapibus vel. Malesuada vestibulum habitasse class sodales viverra mauris fermentum tortor massa bibendum augue libero, euismod montes sed dis magna vel leo praesent mattis platea eleifend. Neque commodo maecenas odio curae cubilia potenti habitant congue porttitor, integer libero mattis nisl sed mauris donec litora magnis, nulla dignissim platea hac dui varius tellus tincidunt.</p> <p>Dignissim proin arcu magna vitae id nam volutpat natoque semper sem, aliquet erat aliquam sociosqu scelerisque eget urna mollis sagittis. Posuere arcu sociosqu mi ad lacinia vitae ac nascetur tempor pharetra aptent fringilla, turpis sodales himenaeos malesuada mattis nisl diam sapien quisque cum. Enim dictum etiam mollis egestas et magna blandit dignissim, ullamcorper parturient odio suspendisse curabitur habitasse dui facilisi, laoreet ridiculus est ad vehicula curae nullam.</p> <p>Facilisis odio mauris consequat mattis faucibus aliquam eu semper condimentum, imperdiet natoque magna leo malesuada lacinia posuere placerat tellus, suscipit dapibus pharetra porta eros diam feugiat dictum. Suscipit euismod fermentum interdum bibendum nullam porttitor, pharetra dis mollis vivamus leo elementum commodo, facilisi rhoncus aptent ligula maecenas. Sodales pellentesque purus parturient mollis mauris tellus id vehicula, velit ac quam sociosqu molestie sollicitudin neque eleifend, mus porttitor aenean penatibus libero fringilla sagittis.</p> <p>Phasellus ornare eros per nam sollicitudin taciti himenaeos, senectus auctor fusce varius magna hendrerit. Urna proin lacus conubia tortor venenatis mauris nec facilisi, fringilla arcu non accumsan pellentesque neque ut dictum euismod, curae tempor eu felis habitasse mi dui. Viverra vehicula ultrices etiam maecenas fusce pulvinar dis sem litora, luctus molestie suscipit tristique imperdiet gravida pretium augue, vel velit nibh hac mus nam consequat eros.</p> <p>Metus feugiat nisl felis fames condimentum facilisi posuere tempus ultricies scelerisque porttitor aptent, justo tempor magnis ultrices phasellus cras nascetur interdum augue aenean iaculis. Lacinia diam lectus lacus facilisis nisl accumsan magna curae nullam placerat bibendum dictum, vehicula dui integer non viverra iaculis interdum vitae at suscipit egestas. Ac aptent fermentum netus eros vulputate phasellus iaculis, cum inceptos velit suspendisse morbi viverra, ante fringilla faucibus donec placerat nullam. Aliquam diam integer vivamus ligula nam cras cursus tristique libero, mattis nisi vestibulum litora enim suspendisse inceptos fames facilisi, erat penatibus ridiculus taciti duis bibendum tortor ornare.</p> <p>Lectus dui sagittis et nascetur nec hendrerit convallis, dapibus curabitur fermentum varius scelerisque nullam platea, metus elementum mattis id semper dignissim. Ridiculus habitasse at sociosqu gravida dui metus velit aptent praesent, dapibus purus egestas et diam nisi pulvinar porttitor, ullamcorper hac integer cubilia sagittis lobortis justo tristique. Penatibus diam convallis velit sapien, ornare nascetur morbi laoreet vulputate, vitae lectus potenti.</p> <p>Egestas nostra mus montes suscipit morbi mattis vestibulum, sapien penatibus laoreet luctus eu feugiat. Integer a fringilla aenean quisque diam nostra, nisl volutpat commodo augue gravida massa, praesent elementum pulvinar curabitur proin.</p></div>
      <div class="third"></div>
   </main>

The sticky position is failing to function properly when I set the float property to the left on other

Answer №1

Answer №2

Similar questions

How can I align a mapped button to appear on the opposite side of the data using Tailwind CSS?

presenting JSON data in a table format accurately

CSS following a clicked event

Hyperlinks are being loaded

How come my database is not receiving the data from the first name field?

css scroll-snap: highlighting the snapped element

What could be causing my carousel to malfunction?

"Include the 'unsafe' prefix at the start of the URL in AngularJS

The dropdown menu vanishes from sight as soon as the cursor moves away from a link

Tips for resetting form fields and clearing previous values before resubmitting the form, allowing for a fresh start with empty fields

Retrieve the ID of the image element using Jquery from a collection of images within a div container

Troubleshooting the unresponsive nature of the multi-level menu

Adjust the height of the div container and implement a vertical scroll feature on the fixed element

What steps are involved in linking Java with JavaScript?

Issue with Javascript functionality not persisting after page reload initiated with a href = '#'

Is there a way to choose a div in Jsoup that lacks an id or any attributes?

What's the reason for the element not inheriting margins from its parent?

What is the best way to update a div element without the need for double clicking?

Dynamic table that collapses/expands in Python's Flask framework

Issue encountered while appending new rows to the tbody of a table