What are some other options to using position: absolute when working within an inline position:relative?

I've been struggling with this problem for some time now and just can't seem to find a solution.

The issue involves a series of position: relative spans enclosing text, along with a position: absolute span set to right: 0;. I expected the second span to stick to the right side of the first span, regardless of whether the first span breaks into two lines. Unfortunately, I have only managed to achieve this in Safari.

You can view an example here: .

After coming across this page: , it appears that while the technique is technically correct, it is not well-supported. My goal is to have each / remain at the end of each li even if it spans multiple lines.

Any suggestions or ideas? Thank you.

htmlcsscross-browsercss-position

Answer №1

Your header may be too small because of the width specified. Removing the width could potentially resolve the issue, as demonstrated by viewing in FF 3.6.

#header {
    float: left;
    margin-right: 48px;
    margin-top: 26px;
    /*width: 334px;*/
}

Alternatively, consider adding white-space: nowrap to your list items (li) for a different approach.

li {
    color: #888888;
    list-style-type: none;
    white-space: nowrap;
}

Update:

You may want to try this updated solution...

.slash {
    color: #BBBBBB;
    padding: 0 2px 0 19px;
}

.header {
    background-color: yellow;
    border: 1px solid red;
}

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

What could be causing the background to disappear when the window width is reduced?

Can someone please explain why, after reducing the width of the window on , there is no wooden background in the upper right corner? Thank you in advance. ...

htmlcss

Unresponsive Hover Effect on iPad

I've implemented a hover effect on the menu for my one-page website. When a user hovers over a navigation link on desktop, the color changes to #ed1c28. .nf-navbar .navbar-collapse a:hover { color: #ed1c28; } Additionally, when a user clicks on a ...

htmlcssipaddevice-compatibility

Can a single div have three different border-bottom styles?

Can three border-bottom styles be applied to a single div element? This is the desired appearance: ...

css

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...

htmlcss

Modify the class of the dropdown and heading 2 elements if they meet specific conditions using Animate.css

Is it possible to add a class using jQuery when two specific conditions are met? 1) If the dropdown selection is either "acting" or "backstage" 2) If the membership status is set to "Non-member" If both of these requirements are fulfilled, I would like ...

javascriptjqueryhtmlcssanimate.css

the components progress down the line

For my right column implementation, I decided to use CSS position:relative and put different elements inside in position:absolute as shown below: <!-- Right Column --> <div class="col-xs-3 pl18" style="position:relative;"> <!-- Withou ...

jqueryhtmlcss

Expanding the table area in bootstrap

I am currently working on a video slider using bootstrap. I have added a table within the slider (carousel) and it is functioning perfectly. However, I am now looking to update the layout to resemble the image below. I have successfully applied the backgro ...

htmlcsstwitter-bootstraphtml-table

Error: An error occurred due to an unexpected asterisk symbol. The import call only accepts one argument in Posenet

While attempting to utilize posenet on a python http server, I encountered a syntax error in the camera.js file at this specific line. import * as posenet from '@tensorflow-models/posenet'; This piece of code has been cloned from the following G ...

javascripthtmlimport

Is there a way to incorporate cell highlighting on IE?

I've implemented a method to highlight selected cells based on the suggestion from jointjs. It surrounds the cell with a 2-pixel red border, which works well in Chrome. However, I need the outline to work in IE as well. Unfortunately, when I reviewed ...

javascripthtmlsvgjointjs

Focusing on the final (but not ultimate) elements within a specified tag

I am facing a challenge with an HTML structure containing multiple instances of a certain element along with two p elements beneath each: <some_tag></some_tag> <p></p> <p></p> <some_tag></some_tag> <p> ...

javascripthtmlcss

My Ajax script is not recognizing the select tag value?

I am struggling with an ajax script that is supposed to send data from a contact form to a PHP script. The main issue I'm facing is that I can't seem to retrieve the value from the "select" tag. My knowledge of JavaScript/ajax is limited, so plea ...

javascriptphphtmlajax

Discoloration of images on HTML5 Canvas

When working with HTML5 Canvas and using the drawImage function, I've observed slight discoloration in certain browsers such as Google Chrome and Mozilla Firefox. Interestingly, Internet Explorer and Chrome Android do not exhibit this issue. The globa ...

htmlimagecanvas

Incorporating an additional table dynamically based on height considerations – can you provide visuals as guidance?

The visual representation of my question far surpasses my verbal explanation. My intention is to insert a new table once the height of the previous table exceeds a specific HEIGHT limit, not a certain number of rows. This project does not involve creat ...

javascriptphpjquerycssasp.net

Is it better to have a heading titled "Navigation" above a <nav> element, or should it be included inside the navigation element itself?

Which is the better way to structure navigation: <h1>Navigation</h1> <nav> <ul> <li>...</li> </ul> </nav> Or: <nav> <h1>Navigation</h1> <ul> <li>...</li> ...

htmlaccessibilitysemantic-markup

Having Trouble Accessing Full Website Source Code with Selenium and Python

Currently, I am attempting to extract data from the following website: https://script.google.com/a/macros/cprindia.org/s/AKfycbzgfCVNciFRpcpo8P7joP1wTeymj9haAQnNEkNJJ2fQ4FBXEco/exec Utilizing selenium and python for this task, I am encountering a challe ...

pythonhtmlseleniumselenium-webdriverweb-scraping

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

javascripthtmlcssvue.js

The ability to scroll horizontally for individual items within a larger container div

JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...

htmlcssscroll

Tips for establishing breakpoints within Material UI grid for achieving responsiveness

I am currently utilizing Material ui's Grid component to organize my user interface elements. Here is the code snippet: <Grid container spacing={3}> <Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRi ...

cssgridmaterial-uiresponsive

Clicking on numerous hyperlinks using Selenium IDE

Looking to automate some websites using Selenium IDE? Here's how you can achieve this: Click Click Link 1 do some clicking inside that link go back to the list of links Click Link 2 do some clicking inside that link go back to the list of links Cli ...

htmlseleniumxpathselenium-ide

Is there a method in JS/jQuery to fill my input field with a constant string and ensure leading zeros are included?

I am looking to create an input textbox that starts with a fixed string followed by up to 6 leading zeros. As the user types in the input box, the leading zeros will be automatically removed once the maximum length of 6 characters is reached. The initial s ...

javascripthtmljquery