Push elements to the extreme bottom right using CSS flexbox

Kennedy Owusu 0
Viewed 29

I want to have the logo at the bottom right corner fixed at that position no matter the screen size whether the screen size is below 768px or above using CSS.

Below is an excerpt of the HTML and CSS code I wrote.

<!DOCTYPE HTML>
 <html lang="en">
  <head>
   <title>Document</title>

   <link rel="stylesheet" href="index.css" />
 
</head>

<body>
 <header>
   <!-- Logo and Menu here--> 
 </header>

 <main>
   <h1 class="brand-name">Brand Name Here</h1>
   <h4 class="brand-slogan">Brand Slogan here</h4>
   <p class="message">The message goes here</p>

   <section class="social-icons">
     <img src="" alt="" />
     <img src="" alt="" />
     <img src="" alt="" />
     <img src="" alt="" />
     <img src="" alt="" />


      <img class="logo" src="" alt="" />
   </section>
 </main>

Excerpt of CSS Code Starts Here

.brand-name { property: value; }

.brand-slogan {
  property: value;
   }

 .message {
  property: value;
   }


  *The Issue is how to place these two (social icons and the logo) side by side and push the logo to the extreme right using css's flexbox*

  **.social-icons {
  property: value;
   }
  .logo {
    property: value;
   }**

Exactly how I want it done has been shown in the image below

enter image description here

flexbox css html
3 Answers

Add a wrapper <div> around the icons. Then, on the outer main wrapper add flexbox like this:

.outer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

You will probably need to make the icons div a flexbox too so they are in a row. I'd then, for semantics actually make the outer container the section and the social icons container the div.

Leon Michalak0

Between your first paragraph and the comment in your pseudo CSS code, what you are asking is not very clear.

To place the social icons and the logo side by side and push the logo to the extreme right, you need a margin-left: auto on the logo.

.social-icons {
  display: flex;
  flex-flow: row wrap;
}

.logo {
  margin-left: auto;
}

If the logo position needs to be fixed at the bottom right of the screen, you need to use position: fixed instead.

.social-icons {
  display: flex;
  flex-flow: row wrap;
}

.logo {
  position: fixed;
  bottom: 0;
  right: 0;
}

If both the social icons and the logo should be at the bottom of the screen and the logo should be pushed to the right, The position should be set on social icons and you need to set either width: 100% or inset-inline: 0 to take all the width of its parent (here main).

.social-icons {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.logo {
  margin-left: auto;
}
userqxVX0

Well, I realised I could have use background-image like this. Assuming my class/id name is bg-img, it could have been like this:

bg-img: {
   background-image:url(image_path_here);
   background-repeat: no-repeat;
   background-position: right bottom;
}
Kennedy Owusu0
Related