Geek asks and answers

Absolute divs next to eachother

In my html page, I have two divs inside the div container. The two inner divs have a "position: aboslute". Of course, they should be placed in the lower left corner of the div container.

This works fine when the div container has only one inner div. But when I add the 2nd div, the second div is placed on top of the first inner div. It makes sense. But now I'm trying to find a way so that they are next to each other instead of overlapping each other.

Internal divs are created. Therefore, I cannot manually add IDs to them. All they have is one class name.

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

Does anyone know how to solve this?

+5
source share
3 answers

- , , :

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

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

+6

2, : first-child : last-child css, html. css

http://jsfiddle.net/sYGfq/6/

CSS

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

Place both divs in separate cells in the table, delete all borders and indents from the table and absolutely place them in the lower left corner of the parent div.

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

0
source

More articles:


All Articles