Footer floating in the middle of the page problems usually happen when the page content is shorter than the viewport, the layout does not use a sticky footer structure, the main area is not allowed to grow, or positioned and floated elements are removed from normal document flow.
Footer Layout Fix
Why is my footer floating in the middle of the page?
A footer floating in the middle of the page usually appears when the page content is short. The footer is not actually floating randomly. It is simply appearing right after the content, while the rest of the viewport remains empty below it. The fix is to make the page layout fill the viewport and let the main content area grow before the footer.
- sticky footer
- min-height
- flex column
- layout flow
What the bug looks like
The footer appears halfway down the screen, with a large empty area below it on short pages.
Why it happens
The footer follows the content normally, but the page layout does not force the footer toward the bottom of the viewport.
What usually fixes it
Use a sticky footer layout: make the page wrapper a flex column with min-height:100vh, then set main to flex:1.
The page content is shorter than the viewport
This is the classic “footer floating” bug. The footer is not broken. It is placed after a short amount of content, and the remaining viewport space appears below the footer.
Broken code
Normal flow only<body>
<header>Header</header>
<main>Short content</main>
<footer>Footer</footer>
</body>
main {
padding: 24px;
}Broken visual result
Correct code
Sticky footer layouthtml,
body {
min-height: 100%;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}Fixed visual result
The layout wrapper does not fill the viewport
Many projects have a wrapper like .site, .page, or .layout. If the flex column is applied to the wrong element, or the wrapper does not have min-height:100vh, the footer can still sit in the middle.
Broken code
Wrong wrapper height.site {
display: flex;
flex-direction: column;
}
.site-main {
flex: 1;
}Broken visual result
flex:1 cannot fill the viewport if the parent wrapper does not fill it first.Correct code
Wrapper fills viewport.site {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.site-main {
flex: 1;
min-height: 0;
}Fixed visual result
Absolute-positioned content is not pushing the footer down
Content with position:absolute is removed from normal document flow. It can visually appear on the page, but it does not increase the height of the parent the same way normal content does. That can make the footer move upward.
Broken code
Content out of flow.main {
position: relative;
}
.feature-card {
position: absolute;
top: 120px;
left: 24px;
right: 24px;
}Broken visual result
Correct code
Keep content in flow.main {
display: grid;
gap: 24px;
}
.feature-card {
position: static;
}
/* Use absolute only for decoration,
not for primary page content. */Fixed visual result
Floats are not cleared before the footer
Older layouts or legacy widgets may use floats. If the parent does not contain or clear floated children, the parent can collapse. The footer then moves up as if the floated content were not there.
Broken code
Uncleared float.thumbnail {
float: left;
width: 160px;
}
.footer {
/* no clear */
}Broken visual result
Correct code
Contain or clear floats.content::after {
content: "";
display: table;
clear: both;
}
/* Modern option */
.content {
display: flow-root;
}Fixed visual result
display:flow-root is a clean modern way to contain floated children.A production-minded sticky footer pattern
A reliable footer system makes the page wrapper fill the viewport, keeps header, main, and footer in normal flow, and lets the main area grow. It works on short pages and long pages without using fixed footer hacks.
Premium code
Sticky footer without position fixedhtml,
body {
min-height: 100%;
}
body {
margin: 0;
}
.site {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.site-header,
.site-footer {
flex: 0 0 auto;
}
.site-main {
flex: 1 0 auto;
min-width: 0;
}
.site-footer {
margin-top: auto;
}Premium visual result
The main area grows when the page is short.
Fast practical rule
If the footer is floating in the middle of the page, do not use position:fixed as the first fix. Use a sticky footer layout: a page wrapper with min-height:100vh, display:flex, flex-direction:column, and a main area with flex:1.
Debug checklist
- Check whether the page content is shorter than the viewport.
- Find the real page wrapper:
body,.site,.page, or.layout. - Add
min-height:100vhormin-height:100dvhto the real wrapper. - Set the wrapper to
display:flexandflex-direction:column. - Set the main content area to
flex:1. - Check for absolutely positioned sections that are not pushing the footer down.
- Check for uncleared floats in legacy layouts or widgets.
- Look for negative margins, transforms, or fixed heights pulling the footer upward.
body, the page wrapper, main, and footer to see which one is too short.
min-height:100vh.
Related fixes that can help
Footer layout bugs often connect to blank space, section height, responsive layout, container sizing, and absolute positioning.
Final takeaway
A footer floating in the middle of the page is usually a short-page layout problem. The footer is following the content normally, but the page wrapper and main area are not filling the viewport.
Use a sticky footer layout with normal document flow. Make the wrapper fill the viewport, let main grow, and keep the footer after the content. That keeps the footer at the bottom on short pages and natural on long pages.