水平对齐一行中的所有HTML元素

Question

I have a question, I have align all elements in one line.

Actually it should look like this.

I created this with the help of creating tables and adding each ProgressBar as Div ELements inside table cells. For some reason, this is not working in IE 7.

So, I wanted to create the html using Div Elements alone without any tables. Now it looks like this:

Can you please tell me what I am missing?

Here is the CSS code:

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;     }

Here is the 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>

Answer 1

This should do it.

http://jsfiddle.net/5Q9Cv/

The primary thing I did was float all your items left, and I re-ordered where your icon is in your HTML to come before your progress bar. I 0'd out all margin space on the progress bar itself. I also set the height of your "blocks" to the height of your container, and changed the border around the blocks to just have border-right. This way there aren't double borders anywhere.

You'll want to mess with the widths a little bit to adjust them to your needs... Just be sure you dont make the widths too small, or you'll break it and the progress bar will fall to the next line. (do your math basically)

HTML:

<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>

</div><!-- END BLOCK -->

<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>

</div><!-- END BLOCK -->

<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>

</div><!-- END BLOCK -->


</div>

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 13px 13px 13px;    
    margin: 0;
    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;
}

Answer 2

Give this a try: http://jsfiddle.net/derekstory/RKADY/

HTML

<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>

CSS

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;  
}