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

Activate the textbox without utilizing `.focus()` method

I am encountering an issue with a small iframe on my page. The content within the iframe is larger than the window itself, requiring users to scroll around to view it in its entirety. Within this iframe, there is a button that, when clicked, triggers an an ...

javascriptjqueryhtmlformsiframe

Is It Possible to Create Flash Content Without Using a SWF File?

Is there a way to embed Flash directly in HTML, rather than linking to an external SWF file? I am looking to send an HTML form via email for the recipient to fill out by opening it in a browser. The final step would involve copying the result to their clip ...

javascripthtmlflashemail

Seeking guidance on resolving issues with this div table

After almost getting everything set up, I encountered some strange issues that have been difficult to resolve. The challenges I'm facing include: The spacing on the right side is too large. Tables always appear stacked without any spacing in bet ...

htmlcsscss-tables

Ways to dynamically incorporate media queries into an HTML element

Looking to make some elements on a website more flexible with media rules. I want a toolbar to open when clicking an element, allowing me to change CSS styles for specific media rules. Initially thought about using inline style, but it turns out media rul ...

javascriptphpjquerycss

Using Jquery to select and apply functions to specified div elements

As someone who is relatively new to JQuery, I have a question regarding the .on() function. Take this example: $('div').on('click', function() {$(this).toggleClass('show-description');}); This code selects all the 'div& ...

jqueryhtmlcss

Prevent the page from automatically scrolling back to the top when a user clicks on a "read more"

When implementing the function below on an HTML page to show/hide more details about a comment, there is an issue where the page scrolls up to the top whenever the "read more" link is clicked. This can be frustrating as it takes the user away from the comm ...

javascriptjqueryhtml

Create a duplicate of the table and remove specific rows

Hi there, I have a query about duplicating a table. I am looking to extract specific results and display only those results. To illustrate, here is an example in HTML code: <table class="table table-striped" id="ProfileList2"> <tbody> ...

javascriptjqueryhtml

The H1 tag is mysteriously displaying padding or margin on the bottom, despite not being set

Despite not setting any padding or margin for the H1 tag, it still appears to have some spacing at the bottom. After applying a margin and padding of 0 to both the h1 tag and the text below it, I am still facing an issue where the text doesn't align ...

htmlcss

Conceal the information within a table using angular js and HTML

Just starting out with angular and I have a table that displays angular data directly in the HTML without any controller or model. <table width="98%" border="0" cellspacing="1" cellpadding="2" class="labels" align="center" id="locc"> <tr style ...

javascripthtmlcssangularjs

selecting unique elements using classes is not possible with jquery

I am experimenting with using ajax on dynamically generated html elements from django. I have tried selecting the instances by class, but for some reason, it is not working as expected. Can anyone point out my mistake here? javascript $(document).ready(fu ...

javascriptpythonhtmldjangoajax

Tips for passing parameters in the $http GET request to transmit information from a dropdown menu using AngularJS

In the modal window I have for creating a new object, there are three forms: 1) a simple input to create "Name"; 2) A dropdown with "Types"; 3) A dropdown with "Ids". The issue arises when trying to send the data after filling out all the forms. An error o ...

javascriptangularjshtml

Hide or show list items in an unordered list using jQuery

I am interested in creating a script that can toggle between "show more" and "show less" functionality for elements in a list. I came across this script: HTML <ul id="myList"> <li>One</li> <li>Two</li> <li> ...

javascriptjqueryhtmlcsslist

Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

On the user interface, I have a dynamic display of mat-grid-tile within a mat-grid-list. These tiles change in number and data based on backend values. When a user clicks on a mat-grid-tile, it triggers a function that receives the tile's data. My goa ...

htmlcssangularuser-interfaceangular6

Material-ui 4.11.4 - Grid: For items to be displayed correctly in a column, it is necessary to set the container direction to 'row' (??)

I have a requirement to display multiple divs in a column layout, centered along the page axis and stretched in width based on the available space. I am currently using the latest version (4.11.4) of material-ui which includes both the <Grid> contain ...

htmlcssmaterial-uicss-grid

The reason CSS properties do not inherit automatically

As I work on designing a straightforward website, I find myself grappling with CSS and particularly inheritance. My objective is to create a side menu where items are stacked vertically: #inner-flex-container { display: flex; flex-direction: column; ...

htmlcssflexboxalignment

Troubleshooting Problem with Button Image Display in CSS

I have created a custom CSS for a PayPal sprite that I made. Below is an image comparison showing how it appears in Internet Explorer and Firefox. Here is the code to display the sprite: .ppsprite { background: url('/images/paypal_sprite.png') ...

css

problem with html tags

I've been attempting to customize an input field using inline styles, but I'm running into issues. Here's what I tried: <div class="row vh-md-100"> <div class="col-md-7 my-md-auto text-center text-md-left"> ...

htmlcss

Text that appears when you hover over specific locations within one image

https://i.sstatic.net/G1uWk.png I need assistance in creating a feature where users can see short descriptions of individuals in a photo when hovering over them (not like a tooltip). I attempted to use an area map but encountered difficulties in implement ...

htmlcssbootstrap-4

Align text in the middle of an image

I need some help with formatting my web page. I want to move the content of the red rectangle into the green rectangle, like in the image below: https://i.stack.imgur.com/sAved.jpg The goal is to center the text with the picture. I've tried using di ...

css

Is it possible to achieve a seamless interaction by employing two buttons that trigger onclick events to alternately

I have a specific goal in mind: I want to create two buttons (left and right) with interactive cursors. The left button should initially have a cursor of "not-allowed" on hover, indicating that it cannot be clicked at the beginning. When the right button ...

javascripthtmlbuttononclickevent-listener