A common challenge of aligning divs in the center and creating a persistent footer

Question

A common challenge of aligning divs in the center and creating a persistent footer

I am in the process of creating an HTML5 page that has a centrally aligned wrap div and a sticky footer. Below is the HTML code I am using:

<body>
  <div id="wrapper">
    wrapper
  </div>
  <footer>
    this is footer
  </footer>
</body>

Here is the CSS code I have implemented:

#wrapper {
width:800px;
height:100%;
padding:5px;
margin:0 auto;
background-color:#fff;
border-radius:10px 10px 0 0;
box-shadow:0 1px 10px 3px #666;
}

footer {
background-color:#060318;
color:#3cc9e7;
width:800px;
padding:5px;
position:fixed;
bottom:0;
}

However, when I view the result, the elements are not centered as intended.

How can I ensure both the wrap div and the footer are centered properly, with the footer being sticky?

html css sticky-footer

Answer 1

Answer №1

While there may be other solutions, one option is to place a div in the footer and center it using CSS:

<footer>
    <div>this is the footer</div>
</footer>

Here is the corresponding CSS for this setup:

footer {
    position:fixed;
    bottom:0;
    left: 0;
    right: 0
}

footer div {
    background-color:#060318;
    color:#3cc9e7;
    width:800px;
    padding:5px;
    margin:0 auto;
}

You can view the outcome of this solution on JSFiddle: http://jsfiddle.net/xRzQy/

Answer 2

While there may be other solutions, one option is to place a div in the footer and center it using CSS:

<footer>
    <div>this is the footer</div>
</footer>

Here is the corresponding CSS for this setup:

footer {
    position:fixed;
    bottom:0;
    left: 0;
    right: 0
}

footer div {
    background-color:#060318;
    color:#3cc9e7;
    width:800px;
    padding:5px;
    margin:0 auto;
}

You can view the outcome of this solution on JSFiddle: http://jsfiddle.net/xRzQy/

Answer 3

Answer №2

position: fixed behaves similarly to position: absolute. To center it, you have two options: utilize JavaScript or introduce a wrapper element:

<div id="footersurround">
  <footer>
    This is the footer content
  </footer>
</div>

CSS:

#footersurround {
    width: 100%;
    position: fixed;
    bottom: 0;
}
footer {
    background-color:#060318;
    color:#3cc9e7;
    width:800px;
    padding:5px;
    margin: 0 auto;
}

http://jsfiddle.net/mblase75/ABCDE/

Answer 4

position: fixed behaves similarly to position: absolute. To center it, you have two options: utilize JavaScript or introduce a wrapper element:

<div id="footersurround">
  <footer>
    This is the footer content
  </footer>
</div>

CSS:

#footersurround {
    width: 100%;
    position: fixed;
    bottom: 0;
}
footer {
    background-color:#060318;
    color:#3cc9e7;
    width:800px;
    padding:5px;
    margin: 0 auto;
}

http://jsfiddle.net/mblase75/ABCDE/

A common challenge of aligning divs in the center and creating a persistent footer

Answer №1

Answer №2

Similar questions

Guide to dynamically add data to two columns

What is preventing me from accessing the hidden article using the URL with the hashname?

Modifying Bootstrap image dimensions

Designing a unique 24-column grid system for Bootstrap 4

What is the best way to save website information in SQL Server?

Firefoxi is the only browser that exhibits strange padding and margin behavior

Which one has better performance: class or CssClass?

The anchor hover state will persist even after clicking the link

Is there a workaround for retrieving a value when using .css('top') in IE and Safari, which defaults to 'auto' if no explicit top value is set?

What are the steps for integrating a CMS with my unique website design?

Conceal Content from Onsite Search

What method is being used by this website to carry out this specific task?

Looking to insert an image in the top-left corner of a div?

When resizing the browser, HTML/CSS elements tend to shift positions :(

Ways to optimize the spacing between the menu bar and widgets

Bootstrap 4 grid system: mixed column widths with fixed and variable, may experience overlapping in IE11"

Using onClick function to pass the value of an input textbox in PHP

``I am experiencing difficulties with utilizing a personalized color scheme in React JS with Material

Guiding the way with headings listed beneath every point

Exploring the Ways to Perform Mathematical Operations in HTML