Using CSS3 to clear floats without altering the HTML structure

Despite searching for multiple solutions to this issue, I have yet to find one that works without requiring me to modify my HTML code.

Here is the current HTML in question:

<div class="name">Daiel</div>
<div class="amount">30€</div>
<!-- clear here -->
<div class="graph">
 <div class="green" style="width: 42%"></div>
</div>

Accompanying this HTML is the following CSS:

div.name{float:left;}
div.amount{float:right; }
div.amount:after { content: " "; display: table; clear: both; }
div.graph { height: 26px; width: 100%; background: #d9d9d9;}
div.graph .green { height: 25px; background: #a2af00;}

My problem lies in positioning the bars below the text elements. I believe I need to use :after on .amount to automatically clear the floats.

Please refer to jsfiddle.net/qQaQg/13/ for a visual representation.

What am I missing here?

Appreciate your assistance!

htmlcss

Answer №1

Are you considering using floats?

Instead of floats, why not try this approach with the same HTML markup but different CSS:

div.graph { height: 26px; width: 100%; background: #d9d9d9;}
div.graph .green { height: 25px; background: #a2af00;}

.name, .amount{ display: inline-block; vertical-align: top; width: 49%; }
.name{ text-align; left; }
.amount{ text-align: right; }

Answer №2

Make sure to include the "clearfix" class on the graph div for proper styling.

Check out this working Fiddle here

CSS:

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
    display: inline-block;
 }

Best of luck with your coding!

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

capturing the HTML title and storing it in a JavaScript variable

Is there a way to retrieve the title "Some Name" in the JS file and have it be populated by the hyperlink's title attribute, which is set to "sometitle" in the HTML code? JS var randomtext={ titleText:"Some Name",} HTML <a class="css" title="so ...

javascripthtmlvariablesvar

Splinter: Extracting XPATH text fragments that do not comprise distinct elements

How can I extract and store the text of the first, underlined, and last parts of the question using Splinter? Refer to the HTML below. I aim to assign the following values to variables: first_part = "Jingle bells, jingle bells, jingle all the" second_par ...

pythonhtmlxpathsplinter

What could be preventing my bootstrap class from being applied as expected?

As a newcomer to HTML, CSS, and bootstrap, I am struggling with updating my stylesheet values in the preview. This is the button tag that I am working with: <button class="btn btn-primary btn-xl">Find out More</button> However, when ...

htmlcssbutton

What is causing the border-bottom in these inline divs to not display when using a fractional height? (Specifically in Chrome)

Here is a jsfiddle I'd like to share with you: https://jsfiddle.net/ionescho/4d07k799/4/ The HTML code: <div class='container'> <div class="row"></div><div class="row"></div><div class="row"></div> ...

htmlcssgoogle-chromeborderoverlap

The functionality of the button is affected when it is placed on the same line as a h1 heading

My goal is to have the page title and profile button aligned on the same line in the header of each page. However, I've encountered an issue where the button doesn't function properly when placed on the same line but works fine when separated ont ...

javascripthtmlcssreactjsweb-applications

Adjusting Table Width with Bootstrap Styling

https://i.sstatic.net/MIkw0.png Could someone please advise on how to adjust the width of the Bootstrap HTML table above? It appears to be spreading out across the entire browser screen. Thank you. # in this section, I inserted bootstrap into my html tab ...

htmlcsstwitter-bootstrapbootstrap-4

Application with menu design, similar to the layout of google.com on mobile devices

Have you seen the Android smartphone with Chrome from GOOGLE.COM? Did you notice the pop-up MENU that looks similar to an application? This menu has a "SPRING" effect, and I'm curious how Google achieved this result. I tried using the property "-web ...

javascriptandroidjqueryhtmlcss

Discovering the specific DOM element that has been clicked using only JavaScript

Looking to enhance my HTML document with interactivity, I wanted to achieve a feature where clicking on a div element would display its respective id. I attempted the following approach: window.onload = function() { associateIds(); clicked(); } fu ...

javascripthtmldom

Retrieve the element located within a "block" element that is relative to the user's click event, without the

I'm pondering whether it's feasible, but here's my concept: Within my page, there are multiple identical blocks with the same classes, differing only in content. I am unable or unwilling to assign IDs because these blocks are dynamically g ...

javascripthtml

Flickering Button Displayed After Fade-In Animation

After scouring the internet for a solution, I still can't seem to figure out why my code isn't working. Whenever an element fades in on Safari, it quickly flickers or flashes white, almost like a rapid refresh is happening. I've tried vario ...

csswordpresssafariwebkit

Conceal certain elements from being printed by the client side on a website

Imagine logging into social media but not wanting to see the number of "likes" on posts as the page loads. For example, when you open a photo from a friend and underneath it shows "Somefriend, someotherfriend, and 123123 persons like this", you may want t ...

htmlbrowser

Illustration: Fixing a CSS Issue

After implementing Technique #8 from the Nine Techniques for CSS Image Replacement, I am not getting the desired results. Instead of correctly positioned images, the output is not what I anticipated. Here is a link to see for yourself: I made a modificati ...

css

Ways to minimize excessive gap between two columns in Bootstrap

How can I reduce the space between two form-groups without moving the email address field with CSS left margins? When I try to make the first column smaller, it automatically wraps to the next line, but I want the email address to be closer to the phone ex ...

htmlcsstwitter-bootstrap

jquery sequential fade effect

I am trying to make each div fade in one by one. Visit this link for reference <div id="w"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> $(function() { $(&a ...

javascriptjquerycss

Instructions on how to load an HTTP file inside a Bootstrap modal

Is it possible to load a file located at an http:// address into a modal window? Something like this: <a class="btn btn-info btn-large" data-toggle="modal" href="#http://localhost/login.html"> <i class="icon-user icon-white"></i> Login ...

csstwitter-bootstrap

Using a single datalist in HTML5 to define options for multiple input elements

When working with HTML5, I discovered that you can create multiple input elements that share the same option list like this: <datalist id="list1"> <option value="A"> <option value="B"> </datalist> input1: <input list="l ...

htmlselectdatalist

Adjust the anchor tag content when a div is clicked

I have a list where each item is assigned a unique ID. I have written the HTML structure for a single item as follows: The structure looks like this: <div id='33496'> <div class='event_content'>..... <div>. ...

javascriptjqueryhtmlcss

What is the method for generating a popover in HTML when a user hovers over a button?

In this scenario, I have implemented two status buttons with different colors. The green button corresponds to "RUNNING" and the red button indicates "TERMINATED", which are fetched from JASON data. Upon hovering over the green status button, the text "RU ...

javascriptjqueryhtmlcss

How come my database is not receiving the data from the first name field?

I have encountered an issue with my comment form where the first name field data is not getting sent to the database along with the comments. I have already checked that the 'first_name' column exists in the database, but still facing this proble ...

phphtmlmysqluser-input

Preventing the use of double-click on Grooveshark

I am currently in the process of creating a webpage to serve as a jukebox for parties. My goal is to have the page load Grooveshark with a transparent overlay (or any other necessary method) that can prevent users from forcefully adding their song to the f ...

javascripthtmloverlay