What is the best way to ensure that two divs in the same row float in opposite directions?

Check out this JSFiddle to see what I have done so far:

JSFiddle Link

html

<div class="results">
   <h2>Some data</h2>
   <ul style="margin:0;padding:0;">
      <li class="resultsListItem" style="list-style-type: none;">
         <div class="answerDiv">text</div>
         <div class="histogramBar"></div>
         <div class="resultDiv">&nbsp;7</div>
      </li><br>
      <li class="resultsListItem" style="list-style-type: none;">
         <div class="answerDiv">text</div>
         <div class="histogramBar"></div>
         <div class="resultDiv">&nbsp;1</div>
      </li><br>
      <li class="resultsListItem" style="list-style-type: none;">
         <div class="answerDiv">text</div>
         <div class="histogramBar"></div>
         <div class="resultDiv">&nbsp;4</div>
      </li><br>
      <li class="resultsListItem" style="list-style-type: none;">
         <div class="answerDiv">text</div>
         <div class="histogramBar"></div>
         <div class="resultDiv">&nbsp;4</div>
      </li><br>
   </ul>
</div>

css

.answerDiv, .resultDiv, .histogramBar {
  display: inline-block;
}

.answerDiv, .histogramBar {
  float: left;
}

.answerDiv {
  margin-right: 10px;
  width: 100px;
}

.histogramBar {
  height: 6px;
  width: 100px;
  background-color: #66dd66;
  margin-top: 9px;
  border-radius: 5px;
  transition: width 1s;
}
.histogramBar:hover {
  width: 150px;
}

/*text*/
h2 {
  font-size: 40px;
  color: black;
}

/*alignment*/
.results {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

I am facing some challenges in getting all the alignment settings correct. My aim is to have the text inside the .answerDiv's aligned to the left. As the text length increases, it should wrap to a second line if necessary. The histogramBar should also align to the left just next to the text, while the results number should be floated to the right side of the containing div. Additionally, I'm struggling to keep the number on the right fixed when the width of the histogramBar changes.

Unfortunately, I haven't been successful in achieving the desired layout. Since I am relatively new to styling, I acknowledge that my code may not be very elegant.

Can you provide guidance on how I can accomplish this?

Summary - text floats left, histogram bar floats left (just beside text), numbers float right. When hovering over the bar and its width changes, the number on the right should remain unaffected.

htmlcssalignmentcss-float

Answer №1

To align the text to the right, the simplest method in your configuration is to position it absolutely based on <li>:

.resultDiv {
    text-align: right;
    position: absolute;
    right: 0;
}

To make this work, you need to include position: relative; in your .resultsListItem.

I made some modifications to your example for better element presentation.

.answerDiv,
.resultDiv,
.histogramBar {
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}
.answerDiv {
  margin-right: 10px;
  width: 100px;
}
.histogramBar {
  height: 6px;
  width: 100px;
  background-color: red;
  margin-top: 9px;
  border-radius: 5px;
  transition: all 1s;
}
.histogramBar:hover {
  width: 150px;
}
/*text*/

h2 {
  font-size: 40px;
  color: black;
}
/*alignment*/

.results {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0;
}
.resultsListItem {
  list-style-type: none;
  position: relative;
}
.resultsListItem:nth-of-type(even) {
  background-color: #f8f8ff;
}
.results ul {
  margin: 0;
  padding: 0;
}
.resultDiv {
  text-align: right;
  position: absolute;
  right: 0;
}
<div class="results">
  <h2>Some data</h2>
  <ul style="">
    <li class="resultsListItem">
      <div class="answerDiv">text</div>
      <div class="histogramBar"></div>
      <div class="resultDiv">7</div>
    </li>
    <li class="resultsListItem">
      <div class="answerDiv">text that will wrap to a new line</div>
      <div class="histogramBar"></div>
      <div class="resultDiv">821</div>
    </li>
    <li class="resultsListItem">
      <div class="answerDiv">text</div>
      <div class="histogramBar"></div>
      <div class="resultDiv">4</div>
    </li>
    <li class="resultsListItem">
      <div class="answerDiv">text</div>
      <div class="histogramBar"></div>
      <div class="resultDiv">14</div>
    </li>
  </ul>
</div>

Answer №2

Hope this solution proves helpful. Enclose the class="histogramBar div within another div and specify the width.

HTML

<div class="results">
 <h2>Some data</h2> 
<ul style="margin:0;padding:0;">
    <li class="resultsListItem" style="list-style-type: none;">
        <div class="answerDiv">text</div>
        <div class="x">
            <div class="histogramBar"></div>
        </div>
        <div class="resultDiv">&nbsp;4</div>
    </li>
    <br>
    <li class="resultsListItem" style="list-style-type: none;">
        <div class="answerDiv">text</div>
        <div class="x">
            <div class="histogramBar"></div>
        </div>
        <div class="resultDiv">&nbsp;4</div>
    </li>
    <br>
</ul>

Sass

$mainColor: #66dd66;
.answerDiv, .resultDiv, .x
{
   display: inline-block;
}
.answerDiv, .histogramBar
{
   float: left;
}
li div{border:1px solid red}
.answerDiv
{
   margin-right: 10px;
   width: 100px;
}
.x{width:160px} /*Now .histogramBar is inside .x*/
.histogramBar
{
   height: 6px;
   width: 100px;
   background-color: $mainColor;
   margin-top: 9px;
   border-radius: 5px;
   transition: width 1s;
&:hover
  {
    width: 150px;
  }
}
/*text*/
h2
{
font-size: 40px;
color: black;
}
/*alignment*/
.results
{
   width: 400px;
   height: 400px;
   position: absolute;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

Remove borders and apply hover on .x By doing this, your numerical text will remain fixed on the right side and hovering over .x will not affect numeric values. Feel free to reach out if you encounter any difficulties.

Answer №3

If I were to tackle this problem, I would approach it in the following way:

$mainColor: #66dd66;

.answerDiv, .resultDiv, .histogramBar
{
display: inline-block;
    border:1px solid red;
}

.results
{
    border:1px solid red;
}

.answerDiv, .histogramBar
{
float: left;
}

.answerDiv
{
margin-right: 10px;
width: 100px;
}

.histogramBar
{
height: 6px;
width: 100px;
background-color: $mainColor;
margin-top: 9px;

border-radius: 5px;
transition: width 1s;

&:hover
{
width: 150px;
}
}

.resultDiv
{
    
}

 .resultsListItem
{

}

/*text*/
h2
{
font-size: 40px;
color: black;
}

/*alignment*/

.results
{
width: 400px;
height: 400px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
answersListItem
{
position:relative;
top:30px;
left:20px;
width:100px;
border:1px solid red;
float:left;
}

.histogramListItem
{
position:relative;
top:10px;
left:50px;
width:100px;
height:72px;
border:1px solid red;
float:left;
}
resultListItem
{
position:relative;
top:-10px;
float:right;
border:1px solid red;
width:10px;
margin-right:50px;
}
<html>
<body>
<div class="results">
   <h2>Some data</h2>
   <ul style="margin:0;padding:0;">
      <li class="answersListItem" style="list-style-type: none;">
         <div class="answerDiv">       text   </div>
         <div class="answerDiv">       text   </div>
         <div class="answerDiv">       text   </div>
         <div class="answerDiv">       text   </div>   
      </li>
      <br>
      <li class="histogramListItem" style="list-style-type: none;">
         <div class="histogramBar">   </div>
 <div class="histogramBar">   </div>
         <div class="histogramBar">   </div>
         <div class="histogramBar">   </div>
      </li>
      <br>
      <li class="resultListItem" style="list-style-type: none;">
         
 <div class="resultDiv">      &nbsp;7   </div>
 <div class="resultDiv">      &nbsp;1   </div>
 <div class="resultDiv">      &nbsp;4   </div>
         <div class="resultDiv">      &nbsp;4   </div>
      </li>
      <br>
   </ul>
</div>

</body>
</html>

Answer №4

Take a look at the Revised code snippet. https://jsfiddle.net/e1xrwyLv/4/

If I've correctly understood your issue, implementing the following CSS should help you resolve it.

CSS

    $mainColor: #66dd66;

.resultsListItem{
    margin-bottom: 5px;
    &:after{
        clear:both;
        content:'';
        display:block;
    }
}
.answerDiv, .resultDiv, .histogramBar
{
    display: inline-block;
}

.answerDiv, .histogramBar
{
    float: left;
}

.answerDiv
{
    margin-right: 10px;
    width: auto;
    max-width:200px
}

.histogramBar
{
    height: 6px;
    width: 100px;
    background-color: $mainColor;
    margin-top: 9px;

    border-radius: 5px;
    transition: width 1s;

    &:hover
    {
        width: 150px;
    }
}

.resultDiv
{
    float:right;

}

.resultsListItem
{

}

/*text*/
h2
{
    font-size: 40px;
    color: black;
}

/*alignment*/

.results
{
    width: 400px;
    height: 400px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

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's preventing me from invoking this object's function through an inline anchor?

CSS: <div class="box"> <p>This is a box</p> </div> Javascript: var box = { content : (function() {return ("This is the content of the box")}) }; alert("Box content: \n" + box.content()); $("output").text( +"<br/ ...

javascripthtmlcssjsfiddle

Unable to make a div grow within a Popper component in a React.js application

I'm facing a challenge with implementing a CSS feature and need some assistance. https://i.stack.imgur.com/KXpGd.png Upon clicking the "See link options" button, the content loads but spills out of the popper. My goal is to have the popper expand in ...

javascripthtmlcssreactjsfrontend

What is the best way to extract styled HTML tags from I18N properties files using the Makara module in conjunction with Express and Kraken.js?

I'm currently utilizing Makara, an I18N module designed for Kraken.js and Express.js. Imagine a scenario where I need to format a specific word within a sentence, but its placement varies based on different languages. I want to ensure that this can b ...

htmlnode.jsexpressinternationalizationkraken.js

Upgrade your input button style using jQuery to swap background images

I have an input button with an initial background image. When a certain condition changes, I want to update its image using jQuery without overriding the button's global CSS in the stylesheet. Is there a way to only change the background attribute wit ...

javascriptjqueryhtmlcss

Disappearance of icon upon hovering in CSS

I am currently working with Angular JS (1.x) and I have a requirement to display tooltip text when hovering over an info icon. The tooltip text appears properly, but the issue is that the icon disappears when hovered over. It reappears once the hover is re ...

cssangularjstwitter-bootstraptooltip

Utilize Jquery to locate and update the text of all div elements that have an empty id attribute

I need help with a task involving a list of divs, some with ids and some without. My goal is to identify all the divs within a specific class that have empty ids and change their inner text to say "no data available". Can this be done? My attempt using $( ...

javascriptjqueryhtml

Creating a multi-level JSON object from a string: A step-by-step guide

I've organized my HTML file in the following structure: Chapter 1.1 1.1.1 interesting paragraph 1.1.1.1 interesting paragraph Chapter 1.2 1.2.1 interesting paragraph 1.2.1.1 interesting paragraph ... Chapter 11.4 ... 11.4.12 interesting ...

pythonhtmljson

What's the issue with my ExpressJS req.query not functioning as expected?

My NodeJS repl setup includes an input, button, and h1 element. The goal is to update the HTML inside the h1 element with the value of the input upon button click. Here's a glimpse of my code: index.js: const Database = require("@replit/database ...

javascripthtmlnode.jsajaxexpress

Combining keyframe properties in a more efficient way using less code

While attempting to develop a LESS mixin for CSS3 keyframes, I encountered the typical way of chaining IDs and classes: #idOne, #idTwo, .classOne, .classTwo { ... } Nothing groundbreaking there. What I'm currently working on is crafting the foll ...

cssanimationlesscss-animations

How can Swipe support help you slide a menu back in?

For implementing swipe support on my landing page carousel, I included jquery.mobile.custom.min.js. However, I am facing a challenge with adding swipe support to "close" the menu. Essentially, swiping left should have the same effect as clicking the butto ...

javascriptcsstwitter-bootstrapmenu

Attempting to migrate a HTML website to WordPress has proven to be a challenge as only the content is visible, with the CSS failing to load properly

I'm looking to convert an HTML site into a WordPress site while keeping the same theme intact. Even after adding 'wp_enqueue_style' to the functions.php file, the CSS file is not being recognized by WordPress. functions.php <?php f ...

htmlcsswordpress

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

initializeSelection() { for (var i = 0; i < this.groupedContacts.length; i++) { for(var j = 0; j < this.groupedContacts[i].length; j++) this.groupedContacts[i][j].selected = this.selectedAll; } } evaluateSelectionStatus() { ...

javascripthtmlangularionic2

My HTML table is not printing at full width

Seeking assistance with creating a printable calendar using an HTML table. The calendar prints perfectly on a Mac, but when attempted on Windows in all browsers, it adds a 3" margin at the top regardless of CSS print settings. The client requires the cal ...

htmlcssprintinghtml-table

What is the reason behind certain websites not displaying a .php extension at the end of their file names?

There are times when I notice that a website's URL is structured like this: www.website.com/index.php while other times it appears like this: www.website.com/index/ What is the reason for the absence of a .php or .html extension in the second URL? ...

phphtmlurl

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

I'm struggling to find a solution to stop the "opacity" effect of the parent container from affecting the child containers. In my code, I want the opacity not to impact the buttons within the elements. I have tried using "radial-gradient" for multipl ...

javascripthtmlcssangulartypescript

HTML/CSS flowchart illustration

Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows ...

htmlcssdiagram

Resolved navigation bar problems

As a beginner in web development, I am working hard to launch my first website. Today, I have a question for the stack overflow community regarding a fixed navbar issue. The navbar I have created is functioning properly on Chrome, but when it comes to Fire ...

phphtmlcssnavbarfixed

Optimizing the speed and load performance of SQLite in Phonegap

As someone who is new to Android programming, I am seeking advice on how to optimize the performance of my phonegap SQLite application. Currently, it takes 30 seconds to load 150 words when I hit the refresh button. Can anyone provide tips on how to enhanc ...

jqueryhtmlcsssqlitecordova

Position the Bootstrap button on the right side

this is the code I am working with: <p class="h1 p-3 mb-2 bg-danger text-white text-danger">Lagerbestand unter Mindestmenge! </p> <br /> <div class="border text-center"> <p class="h5 text-center">Durc ...

htmlcsstwitter-bootstrap

Real-time Property Availability Widget

I need assistance with creating a website for a homeowner who wants to rent out their property. The client requires a feature that allows them to log in and easily mark individual days as available or unavailable for rental by choosing specific colors for ...

javascripthtmlwebcalendarwidget