I am trying to get my header to stay at the top of the page when scrolling so I used:
.header{
background-color: #8091F2;
color: white;
position: -webkit-sticky;
position: sticky;
top: 0px;
border-radius: 10px;
height: auto;
}
...but it stops being "sticky" about halfway down the page, more specifically at:
<div id="speeds">
<div >
<div >
<table>
<tr>
<td colspan="3">
<h2>
Best Speed: Intel
</h2>
Here is the code I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AMD Ryzen vrs Intel</title>
<link rel="stylesheet" type="text/css" href="./Fonts/stylesheet.css">
</head>
<body>
<div >
<img align="left" src="./images/amd.png">
<img align="right" src="./images/intel.png">
<table >
<tr><td> </td></tr>
<tr>
<td>
<a href="#speeds">Speeds</a>
</td>
<td>
<a href="#overclocking">Overclocking</a>
</td>
<td>
<a href="#cores">Cores</a>
</td>
<td>
<a href="#performance">Performance</a>
</td>
<td>
<a href="#price">Price</a>
</td>
</tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</div>
<div >
<p></p>
<table>
<tr>
<td colspan="3">
<h2>AMD vs Intel: Who Makes the Better CPU?</h2>
<p>
The AMD vs Intel debate has been getting more intense in the past couple of years. Different models from the two manufacturers have different clock speeds, core counts, and other specifications. But once you know what you’re looking for, and what each manufacturer has to offer, the decision-making process will be a whole lot easier. Here’s everything you need to know about the difference between AMD and Intel CPUs, and which one you should buy.
</p>
<p>
When it comes to AMD vs Intel, it all depends on what kind of use you are. AMD is a good choice for entry- and mid-level users, while Intel makes the best premium chips for pro users. This is because Intel’s high-end chips are faster and more power-efficient than AMD’s.
</p>
<p>
For decades, Intel dominated AMD, and it was considered the brand leader in the CPU market. However, things turned around for AMD when they released the Ryzen 7 series, which was made to rival Intel’s Core i7 offerings.
</p>
<p>
AMD followed through with the launch of Ryzen 3 and 5 models. Their latest offering is the Ryzen 9 3950X, AMD’s first 16-core, 32-thread processor for mainstream use. In contrast, Intel offers the eight-core, 16-thread Core i9-9900K. The company touts it as “the best gaming processor in the world.” Intel’s Core X Processor Series has up to 18 cores and 36 threads, making it the perfect choice for high-end users who are into content creation.
</p>
</td>
</tr>
<tr>
<td>
<div class = movePic>
<img src="./images/amd_chip.png">
</div>
</td>
<td>
<img src="./images/intel_chip.png">
</td>
</tr>
</table>
</div>
<p></p>
<div id="speeds">
<div >
<div >
<table>
<tr>
<td colspan="3">
<h2>
Best Speed: Intel
</h2>
</td>
</tr>
<tr>
<td>
<p>
CPU performance is measured in terms of clock speed or clock rate. This number is expressed in gigahertz (GHz), and it tells you how fast the CPU can process data. A higher clock rate means that the CPU can perform tasks better. However, other factors like the number of cores and how fast the CPU can process instructions can also affect CPU performance.
</p>
</td>
<tr>
<td>
<p>
When it comes to speed difference, the AMD vs Intel war is close for entry-level and mid-range products. For entry-level CPUs, Ryzen 3 models are almost just as fast as Intel CPUs. The Core i38350K, for instance, has the highest clock rate in this series at 4.0 GHz, while the Ryzen 3 2300X and 220G models offer a comparable speed of 3.5 GHz. Clock speeds for mid-range AMD processors start at 3.1 GHz with the Ryzen 5 2600E. In comparison, Intel starts at a lower 1.7 GHz with the Core i5 8500T.
</p>
</td>
</tr>
<tr>
<td>
<p>
Intel does offer higher clock speeds for its high-end Core i7 and i9 chips. There are models in the i9 series that have comparable speeds with their Ryzen Threadripper counterparts. However, for this line, Ryzen CPUs are more power-hungry than Intel’s. So, if you want a high-end CPU that performs at high speeds, but is also power-efficient, it is best to go with Intel.
</p>
</td>
</tr>
</table>
</div>
</div>
<div >
<div >
<center>
<img src="./images/speeds.jpg" >
</center>
</div>
</div>
</div>
</body>
</html>
And here is the CSS file:
html{
scroll-behavior: smooth;
}
body{
background-color: #231B40;
height: auto;
}
h2{
text-align: center;
color: #3c67dc;
}
.pics{
width: 145px;
height: 80px;
padding-top: 10px;
padding-left: 10px;
padding-right: 25px;
}
.mid_pics{
width: 300px;
height: 300px;
}
.movePic{
text-align: right;
}
.statpics{
width: 500px;
height: 725px;
}
.container{
background-color: #151426;
font-family: 'PT Sans Regular', sans-serif;
padding-left: 65px;
padding-right: 65px;
color: #BCB4D9;
font-size: 18pt;
border-radius: 10px;
}
.container_1{
font-family: 'PT Sans Regular', sans-serif;
color: #BCB4D9;
font-size: 18pt;
border-radius: 10px;
padding: 20px;
height: auto;
}
.container_2{
background-color: #151426;
padding: 53px;
border-radius: 10px;
height: auto;
}
.container_3{
background-color: #151426;
padding: 65px;
border-radius: 10px;
height: auto;
}
.float_side{
float: left;
width: 45%;
padding: 20px;
height: auto;
}
.header{
background-color: #8091F2;
color: white;
position: -webkit-sticky;
position: sticky;
top: 0px;
border-radius: 10px;
height: auto;
}
.choicePadding{
font-family: 'PT Sans Regular', sans-serif;
padding-left: 65px;
padding-right: 65px;
color: white;
font-size: 18pt;
}
.center{
margin-left: auto;
margin-right: auto;
}
a:link{
text-decoration: none;
}
a:visited{
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #3c67dc;
}
@font-face {
font-family: 'PT Sans Narrow';
src: url('fonts/PTSansNarrow-Bold.eot');
src: url('fonts/PTSansNarrow-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSansNarrow-Bold.woff2') format('woff2'),
url('fonts/PTSansNarrow-Bold.woff') format('woff'),
url('fonts/PTSansNarrow-Bold.ttf') format('truetype'),
url('fonts/PTSansNarrow-Bold.svg#PT Sans Narrow') format('svg');
font-family: 'PT Sans Regular';
src: url('fonts/PTSansNarrow-Regular.eot');
src: url('fonts/PTSansNarrow-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSansNarrow-Regular.woff2') format('woff2'),
url('fonts/PTSansNarrow-Regular.woff') format('woff'),
url('fonts/PTSansNarrow-Regular.ttf') format('truetype'),
url('fonts/PTSansNarrow-Regular.svg#PT Sans Narrow') format('svg');
}
If anyone has any clue as to why it stops being sticky at this spot on the page please let me know, thanks.
CodePudding user response：
The problem comes from .float_side having the float:left property. This is because when you use float, "the element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning)." mdn web docs In other words, the divs with float will not be rendered as part of the normal flow of the document, which interferes with your sticky header appearing as expected.
A possible solution in your case would be to remove float:left from .float_side and instead position those divs by using display: flex on .container_1. (You will probably want to adjust the class name .float_side to reflect this change.)
As David Varela mentioned, there is also a solution which allows you to continue using float. By adding display: flow-root; to .container_1, you can create a new block formatting context which will result in the float divs exhibiting their float behavior within that box.
Here's an example of what a display: flex solution would look like:
html{
scroll-behavior: smooth;
}
body{
background-color: #231B40;
height: auto;
}
h2{
text-align: center;
color: #3c67dc;
}
.pics{
width: 145px;
height: 80px;
padding-top: 10px;
padding-left: 10px;
padding-right: 25px;
}
.mid_pics{
width: 300px;
height: 300px;
}
.movePic{
text-align: right;
}
.statpics{
width: 500px;
height: 725px;
}
.container{
background-color: #151426;
font-family: 'PT Sans Regular', sans-serif;
padding-left: 65px;
padding-right: 65px;
color: #BCB4D9;
font-size: 18pt;
border-radius: 10px;
}
.container_1{
display: flex;
font-family: 'PT Sans Regular', sans-serif;
color: #BCB4D9;
font-size: 18pt;
border-radius: 10px;
padding: 20px;
height: auto;
}
.container_2{
background-color: #151426;
padding: 53px;
border-radius: 10px;
height: auto;
}
.container_3{
background-color: #151426;
padding: 65px;
border-radius: 10px;
height: auto;
}
.float_side{
width: 45%;
padding: 20px;
height: auto;
}
.header{
background-color: #8091F2;
color: white;
position: -webkit-sticky;
position: sticky;
top: 0px;
border-radius: 10px;
height: auto;
}
.choicePadding{
font-family: 'PT Sans Regular', sans-serif;
padding-left: 65px;
padding-right: 65px;
color: white;
font-size: 18pt;
}
.center{
margin-left: auto;
margin-right: auto;
}
a:link{
text-decoration: none;
}
a:visited{
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #3c67dc;
}
@font-face {
font-family: 'PT Sans Narrow';
src: url('fonts/PTSansNarrow-Bold.eot');
src: url('fonts/PTSansNarrow-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSansNarrow-Bold.woff2') format('woff2'),
url('fonts/PTSansNarrow-Bold.woff') format('woff'),
url('fonts/PTSansNarrow-Bold.ttf') format('truetype'),
url('fonts/PTSansNarrow-Bold.svg#PT Sans Narrow') format('svg');
font-family: 'PT Sans Regular';
src: url('fonts/PTSansNarrow-Regular.eot');
src: url('fonts/PTSansNarrow-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSansNarrow-Regular.woff2') format('woff2'),
url('fonts/PTSansNarrow-Regular.woff') format('woff'),
url('fonts/PTSansNarrow-Regular.ttf') format('truetype'),
url('fonts/PTSansNarrow-Regular.svg#PT Sans Narrow') format('svg');
}<body>
<div >
<img align="left" src="./images/amd.png">
<img align="right" src="./images/intel.png">
<table >
<tr>
<td> </td>
</tr>
<tr>
<td>
<a href="#speeds">Speeds</a>
</td>
<td>
<a href="#overclocking">Overclocking</a>
</td>
<td>
<a href="#cores">Cores</a>
</td>
<td>
<a href="#performance">Performance</a>
</td>
<td>
<a href="#price">Price</a>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<div >
<p></p>
<table>
<tr>
<td colspan="3">
<h2>AMD vs Intel: Who Makes the Better CPU?</h2>
<p>
The AMD vs Intel debate has been getting more intense in the past couple of years. Different models from the two manufacturers have different clock speeds, core counts, and other specifications. But once you know what you’re looking for, and what each manufacturer has to offer, the decision-making process will be a whole lot easier. Here’s everything you need to know about the difference between AMD and Intel CPUs, and which one you should buy.
</p>
<p>
When it comes to AMD vs Intel, it all depends on what kind of use you are. AMD is a good choice for entry- and mid-level users, while Intel makes the best premium chips for pro users. This is because Intel’s high-end chips are faster and more power-efficient than AMD’s.
</p>
<p>
For decades, Intel dominated AMD, and it was considered the brand leader in the CPU market. However, things turned around for AMD when they released the Ryzen 7 series, which was made to rival Intel’s Core i7 offerings.
</p>
<p>
AMD followed through with the launch of Ryzen 3 and 5 models. Their latest offering is the Ryzen 9 3950X, AMD’s first 16-core, 32-thread processor for mainstream use. In contrast, Intel offers the eight-core, 16-thread Core i9-9900K. The company touts it as “the best gaming processor in the world.” Intel’s Core X Processor Series has up to 18 cores and 36 threads, making it the perfect choice for high-end users who are into content creation.
</p>
</td>
</tr>
<tr>
<td>
<div class=movePic>
<img src="./images/amd_chip.png">
</div>
</td>
<td>
<img src="./images/intel_chip.png">
</td>
</tr>
</table>
</div>
<div id="speeds">
<div >
<div >
<table>
<tr>
<td colspan="3">
<h2>
Best Speed: Intel
</h2>
</td>
</tr>
<tr>
<td>
<p>
CPU performance is measured in terms of clock speed or clock rate. This number is expressed in gigahertz (GHz), and it tells you how fast the CPU can process data. A higher clock rate means that the CPU can perform tasks better. However, other factors like the number of cores and how fast the CPU can process instructions can also affect CPU performance.
</p>
</td>
<tr>
<td>
<p>
When it comes to speed difference, the AMD vs Intel war is close for entry-level and mid-range products. For entry-level CPUs, Ryzen 3 models are almost just as fast as Intel CPUs. The Core i38350K, for instance, has the highest clock rate in this series at 4.0 GHz, while the Ryzen 3 2300X and 220G models offer a comparable speed of 3.5 GHz. Clock speeds for mid-range AMD processors start at 3.1 GHz with the Ryzen 5 2600E. In comparison, Intel starts at a lower 1.7 GHz with the Core i5 8500T.
</p>
</td>
</tr>
<tr>
<td>
<p>
Intel does offer higher clock speeds for its high-end Core i7 and i9 chips. There are models in the i9 series that have comparable speeds with their Ryzen Threadripper counterparts. However, for this line, Ryzen CPUs are more power-hungry than Intel’s. So, if you want a high-end CPU that performs at high speeds, but is also power-efficient, it is best to go with Intel.
</p>
</td>
</tr>
</table>
</div>
</div>
<div >
<div >
<center>
<img src="./images/speeds.jpg" >
</center>
</div>
</div>
</div>
</body>And here's a codepen example of a solution with display: flow-root: example
CodePudding user response：
You don't need to use float left.
.float_side{
width: 45%;
padding: 20px;
height: auto;
}
After that change the properties of .container_1 with the following
.container_1{
display: flex;
align-items: center;
justify-content: flex-end;
font-family: 'PT Sans Regular', sans-serif;
color: #BCB4D9;
font-size: 18pt;
border-radius: 10px;
padding: 20px;
height: auto;
}
CodePudding user response：
I agree with Andrew's description of the problem. The height of container_1 is collapsing because of the floated elements. If you set a background color for container_1 you can clearly see this effect.
However, if you still want to use floats for layouts, you can add a clearfix to the parent container (container_1 in this case) to prevent its height from collapsing.
Using display: flow-root on the parent container would be a direct solution:
.container_1{
font-family: 'PT Sans Regular', sans-serif;
color: #BCB4D9;
font-size: 18pt;
border-radius: 10px;
padding: 20px;
height: auto;
display: flow-root;
}