Absolute divs next to eachother

Question

In my html page i have two divs inside a container div. The two inner divs have a 'position: aboslute'. Becuase they have to be placed at the bottom left corner of the container div.

This works great when the container div only has one inner div. But when i add a 2nd div, then the 2nd div is placed ontop of the first inner div. Which makes sense ofcourse. But now i'm trying to find a way to have them next to eachother instead of them overlapping eachother.

The inner divs are generated. So i can't manually add an ID to them. All they have is one class name.

Example:

<div id="container">
    <div class="icon">ICON1</div>
    <div class="icon">ICON2</div>
</div>

#container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

.icon {
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid green;
}

Anyone have any idea how to solve this?

Answer 1

Use the absolute positioning on a wrapper element instead of each individual icon, then you can float or position the icons how you like within that container:

<div id="container">
    <div class="icon-wrapper">
      <div class="icon">ICON1</div>
      <div class="icon">ICON2</div>
    </div>
</div>

#container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.icon {
    border: 1px solid green;
    float:left;
}
.icon-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
}

Demo: http://jsfiddle.net/sYGfq/3/