Arrange all HTML components in a single horizontal line

I have a query regarding aligning all elements in a single line.

This is how it should ideally appear:

Initially, I arranged the elements by creating tables and inserting each ProgressBar as Div Elements within table cells. However, this setup seems to be ineffective in IE 7.

Therefore, I decided to construct the HTML using only Div Elements without any tables. The current structure looks like this:

Could you please point out what I may be overlooking?

Below is the CSS code snippet:

div.coverage-container {
  border: 1px solid rgba(0, 0, 0, 0.13);
  width:370px;
   height:30px;   
}  

div.progressbar-content{
width: 95px;    
text-align: center;
float:left; 
border: 1px solid rgba(0, 0, 0, 0.13);
 }


div.progressbar-maindiv {
background-color: #DAE2E3;
border-radius: 13px 13px 13px 13px;    
margin: 3px -9px 3px 114px;
padding: 3px;
width: 75px;
float:left;
 }


.progressbar-percentage {
background-color: #F23F54;
border-radius: 15px 15px 15px 15px;
height: 15px;
width: 80.00%;
 }

 .progressbar-chart-icon {       margin-right: 5px; float:right;       text-align: center;     }

And here is the corresponding HTML Code:

 <div class="coverage-container">   
<div class="progressbar-content">
    <div class="progressbar-maindiv">
        <div class="progressbar-percentage">
            <center>80%</center>
        </div>

    </div>
    <img width="21" height="21" title="Get Trends"  src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />            
</div>

<div class="progressbar-content">
    <div class="progressbar-maindiv">
        <div class="progressbar-percentage">
            <center>80%</center>
        </div>
    </div>
    <img width="21" height="21" title="Get Trends"  src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon">
</div>

<div class="progressbar-content">
    <div class="progressbar-maindiv">
        <div class="progressbar-percentage">
            <center>80%</center>
        </div>
    </div>
    <img width="21" height="21" title="Get Trends"  src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon">
</div>

</div>
htmlcss

Answer №1

Here's the solution for your issue.

Link to JSFiddle example

To achieve the desired layout, I made some adjustments in your HTML structure and CSS styling. Firstly, I floated all items to the left and rearranged the order of elements in the HTML. Additionally, I removed margins on the progress bar and adjusted the block heights to match the container height properly. I also modified the border styling to eliminate any double borders.

Make sure to fine-tune the widths according to your requirements, avoiding making them too narrow which could cause content breakage and misalignment.

Updated HTML:

<div class="coverage-container">
   <!-- Blocks with progress bars -->
</div>

Revised CSS:

div.coverage-container {
    border: 1px solid rgba(0, 0, 0, 0.13);
    width:370px;
    height:30px;   
    overflow: visible;
    clear: both;
}  

div.progressbar-content {
    width: 120px;
    height: 30px;
    text-align: center;
    float:left;
    border-right: 1px solid rgba(0, 0, 0, 0.13);
}

div.progressbar-maindiv {
    background-color: #DAE2E3;
    border-radius: 13px;    
    margin: 0;
    padding: 3px;
    width: 75px;
    float:left;
}

.progressbar-percentage {
    background-color: #F23F54;
    border-radius: 15px;
    height: 15px;
    width: 80%;
}

.progressbar-chart-icon {
    margin-right: 5px;
    float: left;
    text-align: center;
}

Answer №2

Check out this example: http://jsfiddle.net/derekstory/RKADY/

Below is the HTML structure:

<div class="coverage-container">
    <div class="progressbar-content">
        <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />
        <div class="progressbar-maindiv">
            <div class="progressbar-percentage">
                <center>80%</center>
            </div>
        </div>
          <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />
        <div class="progressbar-maindiv">
            <div class="progressbar-percentage">
                <center>80%</center>
            </div>
        </div>
                <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />
        <div class="progressbar-maindiv">
            <div class="progressbar-percentage">
                <center>80%</center>
            </div>
        </div>
</div>

The CSS styling for this structure is as follows:

div.coverage-container {
    border: 1px solid rgba(0, 0, 0, 0.13);
    width:700px;
    height:30px;
    display: inline-block;
}
div.progressbar-content {
    width: 95px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.13);
    display: inline;

}
div.progressbar-maindiv {
    background-color: #DAE2E3;
    border-radius: 13px 13px 13px 13px;
    margin: 3px 9px 20px -10px;
    padding: 3px;
    width: 75px;
    float: left;
}
.progressbar-percentage {
    background-color: #F23F54;
    border-radius: 15px 15px 15px 15px;
    height: 15px;
    width: 80.00%;

}
.progressbar-chart-icon {
    margin-right: 5px;
    float:left;
    text-align: center;  
}

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

The background hue contracts as the window size changes

I am encountering an issue. The appearance of my page is not matching what I had envisioned. *{margin:0; padding:0;} .width{width:980px;margin:0 auto;} .header{width:100%;background-color:#ffffbb;} .leftpanel{float:left;height:50px;} .rightpanel{float:r ...

htmlcss

PHP form does not seem to be vulnerable to cross-site scripting attacks

On one of my web pages, I have a form with an action php page using the following html syntax: <form name="form" action="test.php" method="get"> I decided to make it more secure by modifying it to: <form name="form" action="<?php echo htmlsp ...

phphtmlforms

What is causing my button to act in this way?

Initially, the website redirects to an undefined URL and then to test.com. I am looking for a way to implement a redirection sequence from to and finally to <head> <script type="text/javascript"> <!-- function popup(url ...

javascripthtmlfunctionpopup

Tips for verifying the HTML5 date format

I am looking to implement the HTML5 date input field <input type='date' name='customDate'> This will allow other users to utilize the built-in datepicker available in their browser. One challenge I have encountered is ensuring ...

javascriptphpjqueryhtmldate

Combining the container and container-fluid classes with Bootstrap for versatile layout design

My goal is to have my website display with a fixed width on xs, sm, and md screens, but be fluid on lg screens. After researching the Bootstrap grid system, I discovered that I can use the .container class for fixed width layouts or the .container-fluid ...

csstwitter-bootstraptwitter-bootstrap-3

My website crashed after attempting to update WordPress

After upgrading my website to Wordpress 3.4, I encountered a major issue that caused significant damage to my site. It seems that half of my posts were not accessible and resulted in a 404 error. Additionally, pages 3 and 4 of my posts also showed a 404 er ...

htmlwordpresspermalinks

Struggling with sending mail using javascript and ajax?

Having trouble sending emails through my website using AJAX. It seems like the data is not being utilized or sent properly. I managed to get it working some time ago, but haven't checked on it since and now it has stopped functioning for some unknown ...

javascriptphpjqueryhtmlajax

Ways to identify when a React child element is overflowing

tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...

javascripthtmlcssreactjs

The span's presence causes the neighboring span to shift downwards

HTML <span class="symbol">$</span> <span class="value">400</span> This code snippet displays the symbols "$" and "400" at the same level in the document. However, if we introduce some styling using CSS: .symbol { font-size: 2e ...

htmlcss

Utilizing jQuery to apply a class to a targeted element when clicked

I'm currently working on animating a menu item where it expands to the left when hovered over, and contracts back when the mouse moves out. This part is functioning as expected. Additionally, I am trying to apply a specific color to the button by add ...

javascriptjquerycss

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

htmlcssbootstrap-4

Ways to duplicate a letter in HTML?

How can a character be printed repeatedly within a table cell using only HTML or HTML and CSS (excluding HTML5)? *(limiting to only HTML or a combination of HTML and CSS) ** The goal is to print the character "." across the entire length of the cell, wit ...

htmlcss

Tips for hiding one sub-navigation menu when hovering over another sub-navigation menu

Setting up the main navigation menu: <ul class="menu12"> <li><a href="/">Home</a></li> <li><a href="/">About</a> <ul> <li><a href="/">History</a></li> <li ...

jquerycssmenu

Creating a form within a PHP script

After creating a form within a PHP file and using the post method to send a value to the next page, I encountered an issue where the variable was not being successfully passed on. What could be causing this problem? When looking at the code snippet provid ...

phphtmlformssessionpost

I'm experiencing an issue with my dropdownlist not triggering the onchange event in AngularJS

I am a beginner in the world of AngularJS and I am trying to extract the values OnChange from a dropdown list. Here is the code that I have experimented with: <div> <select ng-controller="UserSelection as User" ng-model="User.UserSelected" n ...

javascripthtmlasp.netangularjs

Null values from sliders causing issues in dynamic shiny application upon initialization and throughout updates

Working on a complex web application with nested navigation and tabs using R's Shiny package. In some cases, accessing slider values from input$ returns NULL unexpectedly, leading to errors in dependent outputs. To resolve this issue, users can trigg ...

javascriptrhtmlnullshiny

New Google Chrome Features and HTML Enhancements

I am working on a website hosted with support for html and javascript. After making updates to the html pages, I have observed that certain Chrome versions are unable to display the updated content and instead show the old html. I am curious about ways t ...

html

What is the best way to increase the size of the input field to allow for more typing space?

My query is quite simple. Even when I set the height to 100px, the cursor still starts in the middle of the input box. I want the entire box to be utilized with the cursor starting at the top left corner for a more intuitive paragraph writing experience. ...

htmlcss

Avoiding parent animations from affecting child elements using CSS

nav { display: inline-flex; align-items: center; width: 100%; height: 8rem; border-bottom: 1px solid black; } .nav-list { display: flex; width: 100%; } .nav-list li { line-height: 8rem; position: relative; } .sub-menu li { color: #c4 ...

htmlcss

How can I simulate pressing the ENTER key in Selenium without selecting any element?

Having trouble using the firefox selenium plugin and sending the enter key after pasting text? The ENTER key press should not interact with any other element on the page, just a simple 'dumb' ENTER key press. error [error] Element name=code not ...

javascripthtmlseleniumweb-scrapingelement