Divs absolutos uno al lado del otro

Question

En mi página html tengo dos divs dentro de un contenedor div. Los dos div interiores tienen una 'posición: aboslute'. Debido a que deben colocarse en la esquina inferior izquierda del contenedor div.

Esto funciona muy bien cuando el contenedor div solo tiene un div interno. Pero cuando agrego un 2º div, entonces el 2º div se coloca encima del primer div interno. Lo cual tiene sentido por supuesto. Pero ahora estoy tratando de encontrar una forma de tenerlos uno al lado del otro en lugar de superponerse entre ellos.

Se generan los divs internos. Entonces no puedo agregarles manualmente una ID. Todo lo que tienen es un nombre de clase.

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

Alguien tiene alguna idea de cómo resolver esto?

Answer 1

Utilice el posicionamiento absoluto en un elemento de envoltura en lugar de cada icono individual, entonces se puede flotar o la posición de los iconos de la forma en que le gusta dentro de ese contenedor:

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

Demostración: http://jsfiddle.net/sYGfq/3/

Answer 2

Si solo hay 2, puede usar: primer hijo o: último hijo en el CSS, sin necesidad de agregar html adicional. Unas pocas líneas de CSS se hará cargo de ella

ejemplo aquí http://jsfiddle.net/sYGfq/6/

CSS para el último hijo

.icon:last-child { 
    left: 200px; 
    border: 1px solid green; 
} 

Answer 3

Ponga los dos divs en células separadas en una tabla, eliminar todas las fronteras y el relleno de la tabla y colóquela absolutamente en la esquina inferior izquierda del div principal.

<div id="container"> 
<table class="none" id="table1"> 
<tr class="none"> 
<td class="none"> 
<div class="icon">ICON1</div> 
</td> 
<td class="none"> 
<div class="icon">ICON2</div> 
</td> 
</tr> 
</table> 
</div> 

---

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

.icon { 
    border: 1px solid green; 
} 

.none { 
    border: 0; 
    padding: 0; 
} 

#table1 { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

Presto!