html - Footer floating to the right no matter what

Question

Welcome To Ask or Share your Answers For Others

html - Footer floating to the right no matter what

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Footer floating to the right no matter what

I'm trying to align a few items that are in the section and then in div horizontally but after floating them to the left and putting footer tag in the bottom of the document .The footer always floats to the right and to the side of the content ,and if I try to increase the width of the section to 40% or more it just pushes the content of the section to the bottom instead of the footer

HTML

<body>
    <section id="box">

        <div class="container">

            <div class="box">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"
                    height="150px" alt="">
                <h3>HTML markup</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quod debitis quae odit
                    nesciunt alias quas facere pariatur exercitationem.</p>
            </div>


            <div class="box">
                <div class="box"></div>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png"
                    alt="" height="150px">
                <h3>CSS3</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quod debitis quae odit
                    nesciunt alias quas facere pariatur exercitationem.</p>
            </div>


            <div class="box">
                <img src="https://designrfix.com/wp-content/uploads/2018/01/Graphic-_Design.jpg" height="140px" alt="" w>
                <h3>Grahpic</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quod debitis quae odit
                    nesciunt alias quas facere pariatur exercitationem.</p>
            </div>


        </div>


    </section>
    
    <footer>Testing testing testing:: copyright 2017 &copy;</footer>

</body>

CSS

#box .box {

    float: left;
    width: 30%;
    padding: 10px;
    text-align: center;

}

question from:https://stackoverflow.com/questions/65858483/footer-floating-to-the-right-no-matter-what

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T19:27:29+0000

I prefer using flexbox for this kind of layout. the section can be wrapped by div and using display: flex; to push away the <footer>(check the flex-centerclass). I also suggest you to using display: flex;, flex-direction: column; and text-align: center; to vertically align and center every content (check the flex-colclass). In addition, if some images may be stretched, you can use object-fit: contain; to fix it. Moreover, I set the footer position fixed at the bottom by position: fixed; left: 0; bottom: 0;(check the footer in the css ).

(((Also, it would be nice to have more spaces between each column.)))

#box .box {
  /* float: left;
  width: 30%;
  padding: 10px;
  /* text-align: center; */
}

.flex-center {
  margin: auto;
  display: flex;
  justify-content: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.flex-col img {
  object-fit: contain;
}

footer {
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link rel="stylesheet" href="style.css" />

    <title>Static Template</title>
  </head>
  <body>
    <section class="" id="box">
      <div class="container flex-center">
        <div class="box flex-col">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"
            height="150px"
            alt=""
          />
          <h3>HTML markup</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. At
            laboriosam quod debitis quae odit nesciunt alias quas facere
            pariatur exercitationem.
          </p>
        </div>

        <div class="box flex-col">
          <!-- <div class="box"></div> -->
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png"
            alt=""
            height="150px"
          />
          <h3>CSS3</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. At
            laboriosam quod debitis quae odit nesciunt alias quas facere
            pariatur exercitationem.
          </p>
        </div>

        <div class="box flex-col">
          <img
            src="https://designrfix.com/wp-content/uploads/2018/01/Graphic-_Design.jpg"
            height="140px"
            alt=""
            w
          />
          <h3>Grahpic</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. At
            laboriosam quod debitis quae odit nesciunt alias quas facere
            pariatur exercitationem.
          </p>
        </div>
      </div>
    </section>

    <footer>Testing testing testing:: copyright 2017 &copy;</footer>
  </body>
</html>

Categories

html - Footer floating to the right no matter what

html - Footer floating to the right no matter what

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags