What is the best way to position my image on the right side of the page?

Question

What is the best way to position my image on the right side of the page?

Trying to position an image on the right side, but facing issues with overlapping social media icons when using the pull-right class in bootstrap.

Desired image layout:https://i.sstatic.net/tyfjW.png

UPDATE:

For reference, here is a link to the header in a jsfiddle:

JSFIDDLE

html css image css-float

Answer 1

Answer №1

If you find yourself using the class pull-right and it remains stuck in place, it could be due to the parent div not extending the width of the navigation bar. I recommend placing the image in a div that spans the entire width of the nav bar before applying the pull-right class. Utilize Chrome's dev-tools to easily identify the specific div to place the image in. Hopefully, this solution works for you!

Apologies for not being able to post this as a comment, as I am still below the required 50 rep mark.

UPDATE: Check out this functional JSFiddle with the fix implemented, in case others encounter a similar issue!

Answer 2

If you find yourself using the class pull-right and it remains stuck in place, it could be due to the parent div not extending the width of the navigation bar. I recommend placing the image in a div that spans the entire width of the nav bar before applying the pull-right class. Utilize Chrome's dev-tools to easily identify the specific div to place the image in. Hopefully, this solution works for you!

Apologies for not being able to post this as a comment, as I am still below the required 50 rep mark.

UPDATE: Check out this functional JSFiddle with the fix implemented, in case others encounter a similar issue!

Answer 3

Answer №2

To align the center of the middle logo, use

justify-content:center; display:flex; width:100%;

and to move the orange bar to the right, use

position:absolute; top:15px; right:0;

. I have implemented inline styling, so please review the html code

/*img{
  width:200px;
  height:200px;
}*/

.navbar-wrapper {
  z-index: 999;
  padding: 0;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  background-color: #1d1d1d;
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  border: 1px solid #000;
  background-image: -webkit-linear-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  background-image: -moz-linear-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  background-image: -o-linear-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  background-image: radial-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  position: relative;
}

.social-top {
  float: left;
  left: 8.333%;
  padding: 0;
  border-radius: 0;
  top: 30px;
  position: absolute;
}

.social-top a:before {
  border: none;
  border-radius: 0;
  content: '';
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.social-top a {
  padding: 8px 10px 5px;
  display: block;
  font-size: 17px;
  position: relative;
  float: left;
  margin-right: 5px;
  border: 1px solid #000;
  background-image: radial-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  color: #ff8800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

@media (max-width: 768px) {
  .social-top {
    display: none;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--HEADER-->
<header>
  <div class="navbar-wrapper">
    <div class="social-top">
      <a rel="nofollow" target="_blank" href="#">
        <i class="fa fa-facebook" style="padding-right: 5px;"></i>
      </a>
      <a rel="nofollow" target="_blank" href="#">
        <i class="fa fa-twitter"></i>
      </a>
      <a rel="nofollow" target="_blank" href="#">
        <i class="fa fa-youtube"></i>
      </a>
    </div>

    <div style="justify-content:center;display:flex;width:100%;">
      <img class="img-responsive" src="https://image.prntscr.com/image/MFOIvVb5TRO8-AgQGFTJAw.png" style="padding: 15px;" alt="Hiraeth logo">
    </div>
    
    <div style="position:absolute;top:0;right:0;">
      <img class="img-responsive" src="https://image.prntscr.com/image/3knsxcoiQ2_pFpe_PcG-sQ.png" alt="Hiraeth logo">
    </div>
  </div>

</header>
<!--END HEADER-->

Answer 4

To align the center of the middle logo, use

justify-content:center; display:flex; width:100%;

and to move the orange bar to the right, use

position:absolute; top:15px; right:0;

. I have implemented inline styling, so please review the html code

/*img{
  width:200px;
  height:200px;
}*/

.navbar-wrapper {
  z-index: 999;
  padding: 0;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  background-color: #1d1d1d;
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  border: 1px solid #000;
  background-image: -webkit-linear-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  background-image: -moz-linear-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  background-image: -o-linear-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  background-image: radial-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  position: relative;
}

.social-top {
  float: left;
  left: 8.333%;
  padding: 0;
  border-radius: 0;
  top: 30px;
  position: absolute;
}

.social-top a:before {
  border: none;
  border-radius: 0;
  content: '';
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.social-top a {
  padding: 8px 10px 5px;
  display: block;
  font-size: 17px;
  position: relative;
  float: left;
  margin-right: 5px;
  border: 1px solid #000;
  background-image: radial-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  color: #ff8800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

@media (max-width: 768px) {
  .social-top {
    display: none;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--HEADER-->
<header>
  <div class="navbar-wrapper">
    <div class="social-top">
      <a rel="nofollow" target="_blank" href="#">
        <i class="fa fa-facebook" style="padding-right: 5px;"></i>
      </a>
      <a rel="nofollow" target="_blank" href="#">
        <i class="fa fa-twitter"></i>
      </a>
      <a rel="nofollow" target="_blank" href="#">
        <i class="fa fa-youtube"></i>
      </a>
    </div>

    <div style="justify-content:center;display:flex;width:100%;">
      <img class="img-responsive" src="https://image.prntscr.com/image/MFOIvVb5TRO8-AgQGFTJAw.png" style="padding: 15px;" alt="Hiraeth logo">
    </div>
    
    <div style="position:absolute;top:0;right:0;">
      <img class="img-responsive" src="https://image.prntscr.com/image/3knsxcoiQ2_pFpe_PcG-sQ.png" alt="Hiraeth logo">
    </div>
  </div>

</header>
<!--END HEADER-->

What is the best way to position my image on the right side of the page?

Answer №1

Answer №2

Similar questions

"Defining a CSS class specifically for styling the span element nested within an

The menu field remains open even after clicking on the menu

When an image is opened in a modal, it causes the original image on

Four-pointed star design with rounded edges

Achieving responsive design for div tags: Automatically adjust the width of left and right div tags to fit the screen, while maintaining the static

Is there a way to make two parallelograms overlap seamlessly and adjust in size automatically using HTML?

Using the jQuery datetimepicker in the 12-hour format with AM and PM

How can AngularJS effectively parse JSON data containing HTML elements?

Guide on developing a JavaScript script for implementing across numerous Bootstrap modals within a single webpage

The Cordova minification tool fails to compress files within the browser platform

Responsive Div that Resizes Proportionally within Parent Container

The integration of jQuery in PHP is experiencing some technical challenges

Having trouble getting a background image with tint to display properly in Bootstrap

Enhancing WordPress Accessibility with Google Tag Manager

Adjust the margins of an image within a text box

Issue with setting background image height to 100% or 100vh

What is the best way to unselect the "all" selector if one of the inputs is no longer selected?

Creating a unique Bootstrap background design

Position the icon to the left side of the button using Bootstrap

Three-handled slider