Question

I have 10 sets of DIVs nested in a parent DIV:

<div id="bar_block">
    <div class="bar bar1"></div>
    <div class="bar bar2"></div>
    <div class="bar bar3"></div>
    <div class="bar bar4"></div>
    <div class="bar bar5"></div>
    <div class="bar bar6"></div>
    <div class="bar bar7"></div>
    <div class="bar bar8"></div>
    <div class="bar bar9"></div>
    <div class="bar bar10"></div>
</div>

I’ve used this CSS so far:

#bar_block {
    width:350px;
    height:75px;
}

.bar {
    border:1px solid #000;
    width:8%;
    float:left;
    margin-right:5px;
}

.bar1 {
    height:10%;
}

.bar2 {
    height:20%;
}

.bar3 {
    height:30%;
}

.bar4 {
    height:40%;
}

.bar5 {
    height:50%;
}

.bar6 {
    height:60%;
}

.bar7 {
    height:70%;
}

.bar8 {
    height:80%;
}

.bar9 {
    height:90%;
}

.bar10 {
    height:100%;
    margin:0;
}

I wanted all of the bars to float left bottom. Absolute position didn’t work for me since all of the bars will cramped together. Any ideas?

Answer 1

Try changing the CSS for the container and divs to:

#bar_block {
    width:360px;
    height:75px;
    position:relative;
}

.bar {
    border:1px solid #000;
    width:24px;
    bottom:0;
    display:inline-block;
    margin-right:2px;
}

The inline-block combined with the bottom and pixel width should do it.

jsFiddle example.