Imagine a layout where there is always a header at the top, a footer at the bottom, and the space between them should be filled by the content 100% (image 2). Additionally, everything in the header, content, and footer should be horizontally centered, using only 550px of width (image 3).
Image 1 :
!
Image 2 :
!
Image 3 :
!
I'm struggling to achieve this purely with CSS. I can't seem to combine fixed header/footer with a centered wrapper. Any suggestions would be greatly appreciated! Thank you.
To achieve the desired outcome, you must include an inner element that specifies the width of the element. Here is an example of how you can do this:
HTML:
<div id="wrapper">
<header id="page-header">
<div class="inner">
Centered
</div>
</header>
<div id="page-content">
<div class="inner">
Centered
</div>
</div>
<footer id="page-footer">
<div class="inner">
Centered
</div>
</footer>
</div>
CSS:
#page-header,
#page-footer {
position: fixed;
width: 100%;
left: 0;
background: #ccc;
}
#page-header {
top: 0;
height: 100px;
}
#page-footer {
bottom: 0;
height: 75px;
}
#page-content {
padding: 100px 0 75px;
}
.inner {
width: 550px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: orange;
}
Here is a simple solution for you: https://codepen.io/xyz123/pen/qwertyui
You can easily customize the padding and margin of the header, footer and .content sections as well as adjust the width of the .container
Make sure to include display:flex for better alignment
if I understand your query correctly:
Basic HTML structure sample
<header>
<div class="container">
HEADER CONTENT
</div>
</header>
<section>
<div class="container orange">
content
</div>
</section>
<footer>
<div class="container">
footer content
</div>
</footer>
The corresponding CSS styling for the code above
body {padding-top:50px;padding-bottom:100px;}
header,footer {background:#D2D2D2;position:fixed;left:0;right:0;width:100%;}
header {top:0;height:50px;}
.container {width:550px;margin-left:auto;margin-right:auto;}
.orange {background:orange;}
footer {height:100px;bottom:0;}
Something strange is happening here - the Add question div shouldn't be visible. It's somehow appearing behind the dropdown content. I've attempted to adjust the z-index of the Add Question div, setting it to a lower number than the dropdown ...
I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...
I am working on creating a card design with a colored background instead of an image. However, I am facing an issue where the rounded-circle background color changes to an ellipsoid shape after passing the mobile size (sm or xs). Here is what I am aiming ...
Is there a way to make the parent div automatically expand when the child div with a fixed width is displayed onclick? Goal: I want the child div to show up when I click the link, and at the same time, I need the parent div to expand or scale to fit the ...
I'm having trouble making a div element draggable. Inside the div, there is an img and some text that acts as a label for the image. The issue is that when I begin dragging by clicking on the img, it's the img that gets dragged instead of the par ...
I'm trying to create a wipe animation that looks like water filling up inside of a drop shape. Currently, it is a square with a wave animation on top of the drop logo. The wave animation works correctly, but I am struggling to contain it within the dr ...
I want to send an HTML email with images using Google's SMTP servers. Here is the HTML code with inline CSS that I have generated: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type& ...
Is it possible to dynamically change the style of paragraphs based on certain classes? Let's say we have a text with a list of p elements and we want to modify the styles of paragraphs that come after specific classes, such as 'alert' or &ap ...
Recently, I have been learning about Django Rest and I am now trying to display some JSON data in HTML. The JSON data I have is: {'Resul': {'Period Start': '2017-01-01', 'Period End': '2017-12-12'}} When ...
Thank you, Stilgar for helping me solve my issue. I created a javascript file and placed all my code in it. After adding this file to the UserControl and retrieving the UserControl's html, I used $("#DivID").html(UserControlHTML). Now everything is wo ...
Let's say I have multiple CSS files (a.css, b.css, ..., e.css) and after concatenating and compressing them, I get a new file called compressed.css. Now, I need to verify if each of the original CSS files is included in the compressed.css file. Are th ...
Whenever I click on the "title text" link, the <ol> element refuses to hide, despite my efforts. After thoroughly reviewing the jQuery documentation and scouring Stack Overflow for answers related to .click(), .children(), .toggle(), and .hide(), I a ...
Currently, I am developing a content script for a Google Chrome browser extension that inserts a horizontal bar at the top of any webpage visited by the user. The issue arises when visiting google.com as Google's navigation bar covers my bar. Here is ...
Here is the code snippet I am struggling with: <form action="profiles.php" method="POST" name="SearchSimple" id="SearchSimple" > <input name="search" id="s" style="width: 150px;" type="text"> <a style="display: inline-block; widt ...
I am currently employing the following code to output multiple lines of text from a database $query_content= "select * from home "; $result_content= mysql_query($query_content,$con); while ($text = mysql_fetch_array($result_content)) { $content = $tex ...
I have been attempting to update the color of the time clock in my timeInput component (material-ui-time-picker) for material-ui, but unfortunately, it is not reflecting the change. Here is the code I am using: <TimeInput style ={heure} ...
Consider this situation: You have a scenario where two images are stacked on top of each other. The image with the highest z-index is transparent and handles click events, similar to Google's Map API, while the image below is for visual representatio ...
My HTML List needs a different look - I want to change the bullet icon into a double quote icon. A website that I found interesting is this one. Here's the CSS code I have: .listStyle li:before { list-style: none; content: "\00BB"; } < ...
My website has encountered indexing errors on Google Search Console. According to the reports, many pages are showing an alternate version in a different language without the "return tag". This "return tag" is believed to be the pointer back to the origina ...
I have a basic animation set up with keyframes. @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(10deg); } 25% { -webkit-transform: rotate(5deg); } 50% { -webkit-transform: rotate(10deg); } 75% { -webkit-transform: ...