Build a Proper Alignment for a Footer

build a proper alignment for a footer

can you try this:

I added justifyContent: "center"

      followDesc:{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginLeft: theme.spacing(2),
        margin: "auto",
      },

oh and you need to get rid of margin on the p element.

try adding somewhere:

p { margin: 0 } or change the p to a div element instead

edit =====

to replicate it like the above do 2 things

add minWidth: 75px in here:

  textFollow: {
    fontSize: "14px",
    fontWeight: "bold",
    textAlign: "center",
    color: "#ff7255",
    fontFamily: "Source Sans Pro",
    minWidth: '75px'
  },

and move this line: <Button className={styles.whiteButton}> join</Button> underneath this line: <div className={styles.followDesc}>

so it looks like this:

<div className={styles.followDesc}>
  <Button className={styles.whiteButton}> join</Button>
  <p className={styles.textFollow}>Follow us</p>
  <FacebookIcon className={styles.socialIcon} />
  <TwitterIcon className={styles.socialIcon} />
  <InstagramIcon className={styles.socialIcon} />
  <LinkedInIcon className={styles.socialIcon} />
</div>

How to correctly format text alignment for the footer section of a webpage with HTML and CSS

add flex-direction: column;
and
remove div closing tag at

<div class="footer-right"></div>

.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    
    flex-direction: row;
}
.footer-left,.footer-right{
    flex-basis: 45%;
    padding: 10px;
    margin-bottom:20px;
}
.footer-right{
    text-align: right;
}

.footer-row h1{
    margin: 10px 0; 
}

.footer-row p{
    line-height: 25px;
}

<div class="footer-row">
  <div class="footer-left">
      <h1>Address</h1>
      <p><strong>Name of place</strong><br>
         <em>at the intersection of such and such</em><br>
         111 address st <br>
         City Name, State 12345 <br>
      </p>
  </div>
  <div class="footer-right">
      <h1>Contact</h1>
      <p>
         111-222-3333 <br>
         email@email.com<br>
      </p>
  </div>
</div>

How to align footer (div) to the bottom of the page?

UPDATE

My original answer is from a long time ago, and the links are broken; updating it so that it continues to be useful.

I'm including updated solutions inline, as well as a working examples on JSFiddle. Note: I'm relying on a CSS reset, though I'm not including those styles inline. Refer to normalize.css

Solution 1 - margin offset

https://jsfiddle.net/UnsungHero97/ur20fndv/2/

HTML

<div id="wrapper">
  <div id="content">
    <h1>Hello, World!</h1>
  </div>
</div>
<footer id="footer">
  <div id="footer-content">Sticky Footer</div>
</footer>

CSS

html, body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  height: 100%;
}

#wrapper {
  background-color: #e3f2fd;
  min-height: 100%;
  height: auto !important;
  margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}

#wrapper:after {
  content: "";
  display: block;
  height: 50px; /* the footer's total height */
}

#content {
  height: 100%;
}

#footer {
  height: 50px; /* the footer's total height */
}

#footer-content {
  background-color: #f3e5f5;
  border: 1px solid #ab47bc;
  height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
  padding: 8px;
}

Solution 2 - flexbox

https://jsfiddle.net/UnsungHero97/oqom5e5m/3/

HTML

<div id="content">
  <h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>

CSS

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#content {
  background-color: #e3f2fd;
  flex: 1;
  padding: 20px;
}

#footer {
  background-color: #f3e5f5;
  padding: 20px;
}

Here's some links with more detailed explanations and different approaches:

• https://css-tricks.com/couple-takes-sticky-footer/
• https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
• http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

---

ORIGINAL ANSWER

Is this what you mean?

http://ryanfait.com/sticky-footer/

This method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.

This footer will stay at the bottom of the page permanently. This means that if the content is more than the height of the browser window, you will need to scroll down to see the footer... but if the content is less than the height of the browser window, the footer will stick to the bottom of the browser window instead of floating up in the middle of the page.

Let me know if you need help with the implementation.

CSS: Properly align the edge of Section with Header and Footer

There are various approaches to do so.

1. Calc()
2. Flex Box (CSS3)
3. Grid System (CSS3)

I wrote you the correct form [ Flex Box ]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Project-1: Simple Layout</title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            * {
                border-style: hidden;
                border-width: 1px;
                box-sizing: border-box;
            }
            body {
                background-color: #2473f2;
                margin-right: 10%;
                margin-left: 10%;
                color: white;
                text-align: center;
                font-family: Arial, Helvetica, sans-serif;
            }
            header,
            nav,
            section,
            footer {
                border-style: solid;
                border-radius: 5px;
            }
            nav,
            section,
            footer {
                float: left;
            }
            nav,
            section {
                padding: 300px 0px;
            }
            nav {
                width: 200px;
                margin-right: 20px;
            }
            section {
                width: 1300px;
            }
            header,
            footer {
                padding: 20px;
            }
            header {
                margin-bottom: 20px;
            }
            footer {
                margin-top: 20px;
                width: 1540px;
            }
            /* just added */
            .main-body {
                display: flex;
                justify-content: space-between;
            }
        </style>
    </head>
    <body>
        <h1>Project-1: Simple Layout</h1>
        <div>
            <header>
                HEADER
            </header>
            <main class="main-body">
                <nav>
                    NAV
                </nav>
                <section>
                    SECTION
                </section>
            </main>
            <footer>
                FOOTER
            </footer>
        </div>
    </body>
</html>

How to Align Footer Text on the Right and on the Left?

I've forked your jsfiddle:

http://jsfiddle.net/82ZU8/

the key here is to float the <h3/>s

CSS

.copyright {
    float: left;
}

.social { 
    float: right;
}

HTML

<!--Footer-->
<div id="footer">
    <h3 class="copyright">Copyright Stuff.</h3>
    <h3 class="social">Social Links.</h3>
    <div style="clear: both"></div>
</div>

Note that you must clear the floated blocks, so the footer div will be fixed.

The reason that the text-align approach doesn't work in the way you will expected, is because <h3 /> is a block element, so it will fill the entire width and causing the next h3 to go to next "line". Giving the float to a block element, will cause the element to shrink to its content and allowing other elements to be aside of it.

how to center a footer div on a webpage

Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.

And if you want a gap above it, give it a top margin.

---

Related Topics