Having difficulty with CSS to position a bottom border under the logos at the top right of the page

Can anyone help me with adding a border under my logos positioned at the top right of the page?

Prior to including position:absolute; in the div, my two logos were correctly placed under the "Contact Me" section at the top right. However, when I added position:absolute;, the left border of the page started moving and the logos shifted down the page.

https://i.sstatic.net/kfKql.png

css #para {
  margin-right: 1.66%;
  float: right;
  font-family: indie flower;
  position: absolute;
  top: 0px;
  right: 0px;
}

.fb {
  width: 27px;
  float: right;
  right: 5px;
  position: absolute;
  margin-top: 3px;
  top: 35px;
}

#in {
  margin-top: 4px;
  width: 25px;
  float: right;
  position: absolute;
  right: 40px;
  top: 35px;
}

div {
  border-bottom: 1.5px solid red;
  width: 60px;
  right: 5px;
  position: absolute;
}
<p id="para">Contact me </p>
<div>
  <img class="fb" width="10" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png">
  <img id="in" width="25" src="https://image.flaticon.com/icons/png/512/69/69366.png">
</div>

htmlcss

Answer №1

To align your content to the right, simply apply float: right to both your #para and div elements. To prevent any overlap, use a <span> with a clear attribute instead of absolute positioning. This approach makes the code much more straightforward.

.clear {
  display: block;
  clear: both;
}

Note that it is best practice to avoid adding CSS directly to tags like div.

#para {
  margin-right: 1.66%;
  float: right;
  font-family: indie flower;
}

.clear {
  display: block;
  clear: both;
}

.fb {
  width: 27px;
  margin-top: 3px;
}

#in {
  margin-top: 4px;
  width: 25px;
}

#icons {
  float: right;
  border-bottom: 1.5px solid red;
  width: 60px;
}
<p id="para">Contact me </p>
<span class="clear"></span>
<div id="icons">
  <img class="fb" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png">
  <img id="in" src="https://image.flaticon.com/icons/png/512/69/69366.png">
</div>

Answer №2

It seems that the issue in your code snippet is caused by positioning the icons absolutely without moving the container, which includes the border.

I suggest making the following changes. Remove absolute positioning and floats from the icons, and instead position the icon container.

css #para {
  margin-right: 1.66%;
  float: right;
  font-family: indie flower;
  position: absolute;
  top: 0px;
  right: 0px;
}

.fb {
  width: 27px;
  margin-top: 3px;
}

#in {
  margin-top: 4px;
  width: 25px;
}

.icon-container {
  border-bottom: 1.5px solid red;
  width: 60px;
  right: 5px;
  top: 0px;
  position: absolute;
}
<p id="para">Contact me </p>
<div class="icon-container">
  <img class="fb" width="10" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png">
  <img id="in" width="25" src="https://image.flaticon.com/icons/png/512/69/69366.png">
</div>

Answer №3

Take a look at this! Remember to style elements using class instead of id.

#left {
margin-right: 1.66%;
float: left;
font-family: indie flower;
top: 0px;
right: 0px;
    }

.fb {
width: 27px;
    }

#in {
width: 25px;
    }

#right {
float: right;
text-align: center;
border-bottom: 1.5px solid red;
right: 5px;
    }
<!DOCTYPE html>
<html>
<head>
<title>question reality.</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="right">
<p>Contact me </p>
<img id="in" width="25" src="https://image.flaticon.com/icons/png/512/69/69366.png">
<img class="fb" width="10" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png">
</div>
</body>
</html>

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

Scrolling on a div can be used to create a looping magnification or scaling

Is there a way to create a seamless loop between #box2 and #box using this fiddle? I want them to reveal themselves in a continuous loop with infinite scroll. Each time one box fills the frame, the next one should appear in the distance, repeating indefini ...

javascripthtmlcss

What is the best way to ensure that two col-lg-6 elements stay horizontally aligned on mobile screens?

What is the best way to keep two col-lg-6 columns aligned horizontally on mobile devices using Bootstrap? ...

htmlcsstwitter-bootstrap

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

In my Angular 4 project, I have integrated Bootstrap, Fontawesome, and some custom CSS. However, all these styles are rendering as separate tags at the top of my index.html file. I would like them to be combined into a single bundled CSS file for better ...

htmlcssangular

Dealing with problematic hover behaviors in Cypress: A guide

I encountered an issue with Cypress hover functionality while trying to access a sub menu that appears after hovering over a main menu item. The error message I received was This element is not visible because it has CSS property: position: fixed and it&ap ...

javascriptjquerycsscypress

What is the best way to vertically align a Material UI component to occupy the remaining space within a container

Issue with Material UI/Grids for Login Page As a newcomer to Material UI/Grids, I am currently working on creating a login page where the layout is split into two parts. The left side occupies 5 column spaces while the right side takes up 7 column spaces. ...

cssreactjsmaterial-ui

What is the best way to add a space line after a word in a sentence using HTML and CSS?

Inquiry: Sentence that needs completion This question pertains to HTML/CSS. I am looking to replicate the image provided, where I need to insert a line to fill the empty space after certain words. The length of the words may vary. For instance, if the ...

htmlcss

Text overflow occurs when content overflows the space of its container, causing the HTML element to

My English isn't the greatest, but I hope to convey the question clearly. I am attempting to create an editable text within a div. Typically, the text will overflow the size of the div, so I need to contain the text in the div using overflow:scroll. ...

htmlcssscrolltooltipoverflow

Side navigation bar expands to the right with Bootstrap

I've been attempting to horizontally expand the links in the side navbar, but I'm struggling to achieve the desired layout despite following Bootstrap 4 tutorials. Below is my code snippet. <li class="active dropright"> ...

htmlbootstrap-4

I'm looking to divide the background horizontally into two sections, with one side being a solid black color and the other side incorporating a gradient of two colors, such as purple transitioning into pink

body { height:100%; background: linear-gradient(top, #d808a4 50%, black 50%); background: linear-gradient(top, #d808a4 50%,black 50%); background: linear-gradient(to bottom, #d808a4 50%,black 50%); height: 229vh; } I am trying to creat ...

htmlcsssplitcolorsgradient

When I refresh or load a page, my database unexpectedly receives blank information! PHP, From

Whenever I load my form page, an empty item is automatically added to the database. It's strange because even after clearing cookies and revisiting the site for the first time, this issue persists. Why does this happen? <body> <hr></h ...

phpmysqlhtmlforms

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Is there a way to make the next video play automatically using the loadPlaylist option? I've tried implementing this code but unfortunately, it doesn't work and the video won't play: <div id="player"></div> <script> var ...

javascriptcssyoutubeyoutube-api

Unusual <li> actions

Recently, I've been working on a website that you can check out here: I've encountered an issue where the content in a particular section seems to be behaving strangely. When I search for the number 1992 (Ctrl+F), I notice that the list items ar ...

htmlcsshtml-lists

I have a project where I'm tasked with assembling a collection of images sourced from an Array populated with JSON

For a homework assignment, I am tasked with creating a basic gallery that showcases 4 images. My goal is to store all the images in an array, with each photo represented as a JSON object, and then load these images from the array. Here is my progress so fa ...

javascripthtmlarrays

Does Angular 2/4 actually distinguish between cases?

I have a question about Angular and its case sensitivity. I encountered an issue with my code recently where using ngfor instead of ngFor caused it to not work properly. After fixing this, everything functioned as expected. Another discrepancy I noticed w ...

htmlangulartypescript

Is there a way to implement the border-box property for Internet Explorer versions 6 and

Similar Question: How to implement box-sizing in IE7 Anyone know a method or workaround to apply box-sizing:border-box; in IE6 and IE7? Even just for IE7? ...

css

Issue with IE 11: Including card image inside anchor tags in Bootstrap 4 causes unwanted white space

I'm having an issue with my Bootstrap 4 card markup where the image is wrapped inside an anchor tag. The problem arises when viewing it in IE 11, as there is a large white space underneath the image, while everything displays fine in Chrome, Edge, and ...

htmlcssbootstrap-4

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

Currently, I am in the process of developing a .NET web application for our company's website. We already maintain an active LinkedIn profile where we regularly post updates. https://i.stack.imgur.com/T2ziX.png My main query at this point is whether ...

javascripthtmliframelinkedin-api

Avoid showing numerical or bullet points for ordered or unordered lists

Hey everyone, I'm currently using the code below to create some list items within an ordered list. $output = '<div id="menu_options">'; $output .= '<ol class="tabs">'; foreach($menu_items as $menu){ $output .= &ap ...

css

Enhancing the layout of a bootstrap table: Creating space between rows while maintaining borders

table{ width: 100%;max-width: 100%; margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;} tbody tr{border:2px solid #256ac4;} td{ color: #8d9097; vertical-align: top; font-size: 14px;} th{text-align:left} <table> <thead> ...

htmltwitter-bootstrap

Tips on creating a clickable div container

Is it possible to add a hyperlink to an entire div element along with its background color and other styles? The goal is for the hyperlink to execute whatever is attached to the id when the selected div is clicked: <div class="className" style= ...

htmlcssasp.net