CODEWITHSUNDEEP
css
Mae
Mae

Reputation: 433

CSS: Float left and position absolute

I have this bar chart created with CSS enter image description here 

.barGraph {
    background: url(images/horizontal_grid_line_50_pixel.png) bottom left;
    border-bottom: 3px solid #333;
    height: 500px;
    margin: 1em 0;
    padding: 0;
    position: relative;
    }

.barGraph li {
    background: #666 url(images/bar_50_percent_highlight.png) repeat-y top right;
    border: 1px solid #555;
    border-bottom: none;
    bottom: 0; 
    color: #FFF;
    margin: 0; 
    float: left; 
    padding: 0 0 0 0;
    list-style: none;
    text-align: center;
    width: 39px;
    }

When I add

.barGraph li {
    position: absolute;
    }

The bars don't float anymore and turn out like this: enter image description here is there a way to get it like this? enter image description here

HTML:

<ul class="barGraph">               
    <li class="set1" style="height: 57px;">57</li>
    <li class="set1" style="height: 154px;">154</li> 
    <li class="set1" style="height: 99px;">99</li>
    <li class="set1" style="height: 57px;">57</li>
</ul>

Upvotes: 2

Views: 886

Answers (1)

j08691
j08691

Reputation: 207891

Float:left and position:absolute together don't make sense. Instead, set the list items to display:inline-block; and vertical-align:bottom;

jsFiddle example

Upvotes: 3

Related Questions