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

Converting HTML and CSS to PDF in Java using iText

I've been working on converting HTML to PDF. Initially, I transformed my HTML code into XHTML using the resources provided in this link: After successfully displaying the generated XHTML code in a browser by creating an HTML file for testing purposes ...

javahtmlcsspdfitext

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Situation at Present ...

javascriptcssreactjsmaterial-uistyled-components

Adapting software for use with Panasonic Viera

We are in the process of transferring our current HTML/JavaScript/CSS application to the Panasonic platform. Our current setup involves using JavaScript for generating HTML and CSS for styling the application. The programming language used in the Panasoni ...

javascripthtmltelevision

Why does the width of my image appear differently on an iPhone compared to other devices?

I recently encountered an issue with the responsiveness of an image on my website. While it displayed correctly on Android and desktop devices, the image appeared distorted on iPhones as if the CSS width attribute was not applied properly. This problem spe ...

javascriptcssreactjs

The nodes on a 2-dimensional grid overlap each other when the browser window is resized

In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window. I am looking for a solution to automatically resize all nodes based on changes ...

cssreactjs

My attempt to showcase data from a database in a grid layout using PHP and HTML seems to be resulting in a vertical display instead

My code is supposed to display a grid of database information, but for some reason it keeps stacking everything vertically instead of organizing it into rows and columns like it should. I've been staring at this code all day and I just can't figu ...

phphtmlmysqlbootstrap-5

How can I change the displayed value of a 'select' element programmatically in Internet Explorer?

My interactive graphic has a drop-down menu implemented with a <select> element. Everything functions correctly, except when using Internet Explorer. The issue arises when attempting to programmatically change the selected value of the <select> ...

javascripthtmlformsd3.js

I am unable to see the last row of the table when I apply a condition after the table name

I need to display all the data from my table. However, if I include ORDER BY id DESC or any code after $sql="SELECT * FROM $tbl_name, the last row does not appear. <?php include "db.php"; $tbl_name="report"; // Table name $sql="SELECT * FROM $tbl_ ...

phphtmlmysql

Create geometric shapes on Google Maps version 2

Can anyone guide me on how to draw a polygon on Google Maps with user-input coordinates? I have two input fields for latitude and longitude, and when the user clicks the button, I want the polygon to be drawn. The code I currently have doesn't seem to ...

javascripthtmlgoogle-mapspolygonlatitude-longitude

Mismatched Container Alignment in HTML and CSS

I am struggling to position the timeline next to the paragraph in the resume section, but it keeps appearing in the next section or below where it's supposed to be. I want the timeline to be on the right side and the heading/paragraph to be on the lef ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to prevent navbar links from wrapping when closed with CSS?

Upon closing my side navbar, I encountered an issue where the links warp to the size of the navbar. I am seeking a solution to keep the links (highlighted in pink in the image below) the same size without warping. Is there a CSS technique to achieve this? ...

htmlcssnavbar

Creating Tailored Breakpoints with Bootstrap for a Unique Design

Currently, I am delving into the world of front-end web design and taking advantage of Bootstrap for creating a responsive layout. However, I have noticed that Bootstrap only offers 5 predefined breakpoints. I am curious to know if there is a way to cust ...

cssbootstrap-4responsive-designbreakpoints

Font Awesome symbols using the class "fa-brands" are not functioning as expected

I have included a font awesome library in the header using the following code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> However, when I try to display an ic ...

htmlcssfont-awesome

What is the best way to split an array into smaller chunks?

My JavaScript program fetches this array via ajax every second, but the response time for each request is around 3 to 4 seconds. To address this delay, I attempted to split the array into chunks, however, encountered difficulties in completing the task: { ...

javascriptphphtmlajax

Error encountered while attempting to insert YouTube video with video.js player using an iFrame

I'm currently using video.js along with the vjs.youtube.js plugin to incorporate YouTube videos directly into the video.js player on my website. Everything is working smoothly and I am able to dynamically add videos to the page. However, I've en ...

htmliframevideohtml5-videovideo.js

Establish height and width parameters for creating a dynamic and adaptable bar chart with recharts

I am currently facing an issue with recharts while trying to implement a BarChart. The setting width={600} and height={300} is causing the Barchart to be fixed in size, rather than responsive. How can I make the BarChart responsive? I attempted using per ...

javascriptcssreactjsmaterial-uirecharts

How can I define the boundaries for the scrolling of a static background image?

Is there a way to limit how far a fixed background image can scroll down a page? Essentially, is it possible to change the background attachment to static when the bottom of the background image is 10px away from the bottom edge of its div container? In t ...

javascripthtmlcss

Interactive Javascript Dropdown Selection

I'm currently developing a registration page for a website and I've added a drop-down box that explains to users why we need their birthday. However, I seem to be having issues with my code. Take a look at the script below: <script language=& ...

javascriptphphtmlclient-sidejquery-events

Obtain date and currency formatting preferences

How can I retrieve the user's preferences for date and currency formats using JavaScript? ...

javascriptjqueryhtmllocalizationgeolocation

Could someone please explain why my ajax is not functioning properly?

I have been working on an AJAX function to pass input values from one page to another. However, I am facing a challenge where the value is not being passed as expected after redirection. Despite my efforts, I cannot figure out why it's not functionin ...

javascriptjqueryhtmlajax