Reputation: 1473

Divs in normal flow overlapping

I'm attempting to position a series of div's (which are dynamic in height) one after another so that they are the same width as their parent. My understanding is that this is what the normal flow should do, but instead they end up overlapping.

See http://www.euro-endo.nl/technologies.php

My html:

<div id="col">

<div id="thing">
    <div id="rimage">
    <div id="pic1"></div>
</div>
<div id="ltext">
    text1
</div>
</div>
<div id="thing">
    <div id="limage">
    <div id="pic2"></div>
</div>
<div id="rtext">
    text2
</div>

</div>

and the corresponding css is:

#col { 
    position: absolute; left: 20px; right: 50px; top:0; bottom:0px;
    width: auto;
    padding: 10px 20px 0px 0px;
    overflow: hidden;
} 
#thing {
    position: static; 
    width: 100%;
    height: auto;
    Margin: 20px;
} 


#ltext {
    position: absolute; left: 0px; right: 210px; top:0px; bottom:0px; 
    width: auto;
    height: auto;
}

#rtext {
    position: absolute; right: 0px; left: 210px; top:0px; bottom:0px; 
    width: auto;
    height: auto;
} 

#rimage {
    position: absolute; right: 0px; top:0px; bottom:0px; 
    width: 210;
    height: auto;
}


#limage {
    position: absolute; left: 0px; top:0px; bottom:0px; 
    width: 210;
    height: auto;
}

(There are a couple more of the id="thing" div's but I think this gives the gist of it.)

Upvotes: 0

Answers (2)

Rob

Reputation: 15160

Your divs are NOT in the normal flow when they are positioned absolutely. This is why the elements overlap. Absolute positioning will places them 'absolutely' with reference to the nearest positioned parent.

Note the other comments about unique id names.

Upvotes: 1