开发者

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.)


One big problem for sure...

You cannot have multiple <div>'s sharing the same id.

id must be unique for each <div>.

As noted in comments, you would use classes to apply styles to multiple elements at once.

You also have them all set to position:absolute; with top:0px; which puts them all in the same place simultaneously.


Running your page through the W3C Validator would catch many issues such as the multiple id's...

http://validator.w3.org


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜