PDA

Click to See Complete Forum and Search --> : css positioning problem

insei
04-21-2010, 02:01 AM
hi

im having some problems with css positioning. one of my div boxes is affected by parent div boxes, and i dont see the connection.

this is how i want the box to look like:

http://www.xgs-gaming.com/project/test1.php

and its simple code:


<body>
<div class="toolTipHover">
<div class="top">
<div class="floatlft1"></div>
<div class="floatlft2">Tyrjente,&nbsp;26&nbsp;år&nbsp;<br>Skedsmo,&nbsp;Akershus</div>
</div>
</div>
</body>



.toolTipHover {
z-index: 1;
position: absolute;
top: 50px;
left: 50px;
background-color: #fff;
border: 1px solid #a2a0a0;
color: #403f3f;
}
.top {
overflow: hidden;
background-color: red;
}
.floatlft1 {
float: left;
width: 20px;
height: 20px;
background-color: green;
}
.floatlft2 {
float: left;
background-color: yellow;
}


and this is how it looks like when i apply parent divs:

http://www.xgs-gaming.com/project/test2.php

the code:


<body>

<div class="wrapper">
<div class="picFrameContainer3x">
<div class="picFrame1">
<div class="pic"></div>
<div class="toolTipHover">
<div class="top">
<div class="floatlft1"></div>
<div class="floatlft2">Tyrjente,&nbsp;26&nbsp;år&nbsp;<br>Skedsmo,&nbsp;Akershus</div>
</div>
</div>
</div>
<div class="picFrame2">
<div class="pic"></div>
</div>
<div class="picFrame3">
<div class="pic"></div>
</div>
</div>
</div>

</body>



.wrapper {
background-color: red;
width: 285px;
height: 335px;
margin: 100px 0px 0px 0px;
}
.picFrameContainer3x {
width: 285px;
height: 83px;
background-color: yellow;
margin: 0px 0px 10px 0px;
padding: 9px 0px 9px 0px;
}
.picFrame1 {
z-index: 2;
position: relative;
float: left;
width: 81px;
height: 81px;
border: 1px solid #a2a0a0;
/* background-color: green; */
margin: 0px 0px 0px 9px;
}
.picFrame2 {
z-index: 0;
position: relative;
float: left;
width: 81px;
height: 81px;
border: 1px solid #a2a0a0;
/* background-color: green; */
margin: 0px 0px 0px 9px;
}
.picFrame3 {
z-index: 0;
position: relative;
float: left;
width: 81px;
height: 81px;
border: 1px solid #a2a0a0;
/* background-color: green; */
margin: 0px 0px 0px 9px;
}
.pic {
width: 75px;
height: 75px;
border: 0px;
margin: 3px;
background-color: green;
}


the floatlft1 and floatlft2 wont float as i want them
anybody knows what this could be? it looks even worse on ie
insei
04-21-2010, 06:07 PM
im totally clueless on this one, any suggestions what i could do to avoid this?

the difference of displaying can better be seen here:

http://www.xgs-gaming.com/project/
insei
04-21-2010, 08:34 PM
if i remove the position: relative; from .picFrame1 then it displays right, but then the positioning is not relative to .picFrame1, but the html element instead.
insei
04-21-2010, 09:08 PM
if i change the width of .picFrame1 to 200px it shows right , something tells me the parent elements width and hight needs to be greater than the child element in order for it to display right.

and if i specify the width and height of .toolTipHover it works, but then it wont be dynamic, i dont want one spesific height and width , i want it to be able to stretch since im going to get the data from a db.

any tips of how to do this?