Hello everyone please help me

I can not set footer section perfactly.
I want to set it align center and bottom . I can I do it?

code link

1 Like

I want to set it align center and bottom . I can I do it?

You can try positioning your footer using position: absolute; for this as text-align and align don’t look like they do their job like you wanted it to be. Here’s how I did it.

footer p {
  position: absolute;
  left: 40%; /*Or maybe bigger than 40% if you want*/
  margin-top: 140px;

Pretty sure there are other better ways for this but that is what I got.

1 Like
<p>Some text.</p><p>More text.</p><div>Even more text.</div>

I was messing with relative and absolute position rules and tried to fix it before looking at your solution, quick question…

Why does this remove the first half of the footer text?

footer p {
position: relative;

Sorry, What do you mean?

Thank you for help. Problem solved.
For better understand Could you explain me why first time Default footer p text show in right side?
I can not understand clearly

Yeah, just saw it. Part of the text is moving to the complete left side of the webpage if I used position: relative;
I don’t know why though. I fixed it by adding more space at the top of the paragraph (margin-top: 250px;)

That’s because it was centering the text itself and not the object (if that even makes sense, sort of hard to explain). Try adjusting it to text-align: left; or text-align: right; to see what I mean.

You could add text-align: center; except that it doesn’t work alone without adding a width property to the centered text. Honestly, I’m not sure why the width property is related for centering the text.

1 Like

Using position absolute is not the solution. It rarely is, to be honest. You should avoid using absolute positioning if and when at all possible.

It is because you are using floats. You have to clear the footer and you should probably also clearfix the sections.

section {
  clear: both;
  display: flow-root;
  /* or a clearfix that works in all browser, there are better ways */
  /* overflow: hidden; */

footer {
  clear: both;
  text-align: center;
  margin-top: 2rem;

My suggestion is to stop using floats and start learning flexbox, ASAP.


Hi @zamani123 !

Welcome to the forum!

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you for help me.

@arnabckm No problem, happy to help.

Here are some links as well to help you get started with flexbox.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.