HTML/CSS Top Bar: Position two contents at opposite ends of the top bar

I am attempting to design a top bar with the following layout

                               Tel:4949494949                    social media icons

In the center, I want to display contact information and on the right side, my social media icons.

However, I am facing an issue where the CSS always aligns the social media icons in the middle, alongside the contact info.
What could be causing this?

#tpbr_box .a {
  width: 10%;
  height: 20%;
  text-align: center;
  display: inline;
  font-size: 20px!important;
}

#tpbr_box .social2 {
  float: right;
}

#tpbr_box {
  font-size: 20px!important;
}
<div class="info">
  <i class="fa fa-home"></i> |
  <a style="color:white;" href="tel:54543">354353535</a>

</div>
<div class="social2">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-youtube"></a>
</div>

htmlcssnavbar

Answer №1

I made a change in the div classes to ensure that each one appears on a new line. Instead of using a div, I switched to an a-class while still assigning a class to each one. The use of percentages for width and margin-left ensures that the HTML elements adjust accordingly, regardless of screen size.

.topbar {
  width: 100%
}

.info {
  margin-left: 45%
}

.social2 {
  margin-left: 55%
}
<div class="info">
  <a class='center'>
   <i class="fa fa-home"></i>
   <a href="tel:54543">354353535</a>
  </a>
  <a class='social2'>
    <a href="#" class="fa fa-facebook">f</a>
    <a href="#" class="fa fa-twitter">t</a>
    <a href="#" class="fa fa-instagram">i</a>
    <a href="#" class="fa fa-youtube">y</a>
  </a>
</div>

Answer №2

Following your specifications, place Info in the center and social links on the right side!

Consider using this code snippet:

<!-- HTML --> 
  <div class="top_nav">
    <div class="info">
     <i class="fa fa-home"></i> |
     <a style="color:white;" href="tel:54543">354353535</a>
    </div>
     <div class="social2">
         <a href="#" class="fa fa-facebook"></a>
         <a href="#" class="fa fa-twitter"></a>
         <a href="#" class="fa fa-instagram"></a>
         <a href="#" class="fa fa-youtube"></a>
     </div>
 </div>

Ensure to apply the following CSS styles:

 #tpbr_box .a {
      width: 10%;
      height: 20%;
      text-align: center;
      display: inline;
      font-size: 20px!important;
  }
  #tpbr_box .social2{
      float:right;
 }

  #tpbr_box  {
          font-size: 20px!important;
  }
 .top_nav{
        display: flex;
  }
  .top_nav    .social2  {
    position: absolute;
    right: 14px;
  }
  .info{
        margin: 0 auto;
  }

Remember to enclose all elements within a parent div with the class "top_nav" for styling control.

Answer №3

The issue arises from applying a text-align: center; to your links. This causes all the links on your page to be centered.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

utilizing tabview for component replacement

Having trouble changing components in Angular 7 with PrimeNG tabview tabs? Need some assistance? I have a setup with 3 components, and I want to switch between them when clicking on the panel inside the tabview. I've tried using onchange functions i ...

htmlangulartypescriptprimeng

Troubling inconsistency in jQuery's .css function performance

I'm facing a problem with the jquery .css function. I am using it to retrieve the actual height of elements that have their height set to auto. The code I am currently using is as follows: $(this).css({ height: $(this).css("height"), width: $(this).c ...

javascriptjquerycss

Video streaming to mobile browsers is experiencing issues due to incomplete HTTP headers being sent

I have successfully implemented a solution to stream fragmented mp4 video to a mobile browser client using the Nancy MVC framework. The code is functioning as expected. However, one scenario I am facing is that the video being streamed is generated simult ...

c#asp.nethtmlvideonancy

Avoid page refreshing when retrieving data using PHP and AJAX

In my current program, I am able to add data and insert it into the database. However, I am looking for a way to automatically send this data to another page or browser without refreshing. I have two browsers open, so how can I submit the data to the other ...

javascriptphphtmlmysqlajax

Image staying in place when browser page is resized

Half page browser Full page browser Hello everyone, I could really use some assistance with my program. I'm trying to figure out how to keep my robot in the same position when switching from a half-page browser to a full-screen browser. Currently, w ...

htmlcssweb

Activate hover effect on desktop screen (excluding tablets and phones) by utilizing media queries

Applying hover state styling to a div can be done like this: div { &:hover { color: red !important; border: 3px solid red !important; } } To exclude iPads and other tablets from this CSS style, you can util ...

htmlcssipadlessmedia-queries

I developed a website and also created a mobile.html version, with the desire to seamlessly switch between the two based on screen

I have two files, home.html and mobilehome.html, and I am trying to switch between them when the screen width goes below a certain size. if (screen.width <= 600) { document.location = "HomeMobile.html"; } This approach works well in Respon ...

jqueryhtmlcssviewport

Reducing image size using CSS can result in blurry images on multiple web browsers

Encountering challenges with downscaled images in multiple browsers... The images must be downscaled to adapt to the browser size. Here is the code snippet: #pic-holder img { -moz-transform: rotate(0deg); /*image-rendering:-webkit-optimize-contras ...

cssimagefirefoxsafari

Printing with tiled SVG background images

Whenever I use an SVG tile as the background for my website, it appears perfectly fine when viewed in a browser. However, when I try to print the page, it scales in a strange and nonuniform way. Is there a solution to prevent this distortion when printing ...

csssvgbackground-image

Rotate the circular border in a clockwise direction when clicked

I have successfully designed a heart icon using SVG that can be filled with color upon clicking. Now, I am looking to add an outer circle animation that rotates clockwise around the heart as it is being created. Currently, the circle only spins in the code ...

javascriptcss

problem with custom scroll bars on Chrome and Internet Explorer

Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...

jquerycssjquery-uigoogle-chromeoperating-system

What causes the appearance of a slight space between a child element positioned absolutely and its parent element with borders? All the margins, padding, and positions have been assigned a value of

I have encountered a peculiar issue that I managed to recreate in a simplified version. In my scenario, the parent element has the CSS property position: relative, while the child element with the ::after pseudo-element has position: absolute and all direc ...

htmlcsscss-position

Adjust the width of the graphics on both sides of the text based on the length of the text content

Is there a way to center an H1 tag between two graphics using CSS or jquery/javascript? The width of the H1 text will vary depending on the page. The dot on the left should remain at the edge of the site, and the line should extend to meet the edge of the ...

javascriptjqueryhtmlcss

implementing datepicker on multiple textboxes in jQuery upon button click

I have the ability to show multiple text boxes using jQuery. I am now looking to add a datepicker to those text boxes. Any assistance in finding a solution would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmldatepicker

How can I arrange an ItemTemplate and Alternating ItemTemplate next to each other in a Gridview layout?

My webpage features a "Reports" page that will dynamically display buttons (formatted ASP:Hyperlinks) based on the number of active reports in a table. While everything works well, I am struggling with achieving the desired layout. I want my buttons to app ...

htmlcssasp.net

Video Autoplay within an image carousel - A seamless integration

I need assistance embedding a YouTube video as the fourth item in a slideshow on my website, www.serenitygardenrooms.com. The slideshow should play the first three images and then autoplay the video before moving on to the next image. However, the code sni ...

javascriptjquerycssyoutubeslideshow

Is it possible to utilize various return values generated by a regex?

Working on a project where I am utilizing regex to extract links from a Google Calendar XML feed. The links appear in the following format: <a href="http://www.drsketchysdublin.com/event-registration/?ee=11">http://www.drsketchysdublin.com/event-reg ...

javascriptjqueryregexhtmldom

Divide the canvas into 100 separate sections using Javascript

Help! I'm trying to divide a canvas into 100 squares that are 50x50px each, but my current code is becoming too lengthy with multiple for loops. Is there a more efficient way to achieve this with just one for loop? Below is the existing code snippet: ...

javascripthtmlcanvas

My attempt to use the Redux method for displaying data in my testing environment has not yielded

I've been attempting to showcase the data in a Redux-friendly manner. When the advanced sports search button is clicked, a drawer opens up that should display historical data when the search attributes are selected. For this purpose, I implemented the ...

javascripthtmlcssreactjsredux

The dropdown menu in the bootstrap is not being properly filled with content on the webpage

In my header file, I am attempting to add a bootstrap dropdown that will display the user id along with two other options in the dropdown menu. Within the header file, I have created a new div element for the dropdown and linked it to a php file where the ...

phpjqueryhtmlcsstwitter-bootstrap