css positioning and display problem

**insei** · 21 Apr 2010, 08:55 PM

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 and how to fix the problem.

this is how it looks like:

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

and its code:

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>

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

its css:

Code:

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

im totally clueless on this one, any suggestions what i could do to avoid this?

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.

hope someone knows what the issue here is

best of regards,
alex

**insei** · 21 Apr 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?

Thread: css positioning and display problem

Thread Tools

css positioning and display problem

Similar Threads

Positioning problem

Having Problems with CSS Positioning

Posting Permissions