1 Replies - 694 Views - Last Post: 24 January 2012 - 11:13 AM

#1 websitepro  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 28-December 11

Problem using CSS right: in div popup. Makes page width larger.

Posted 24 January 2012 - 10:32 AM

I have a popup div that I am positioning based on the relative position it is at. It looks great and shows as it should, but since I am using right:229px; to make it line up right, it makes the page wider on the right side and shows the scroll bar at the bottom. How can I fix this so it doesnt widen the page to the right? I tried max-width and overflow hidden on the popupdiv, but this just hides 75% of the popup and still keeps the page widening issue.


I wanted to add. Picture a table that is 100% width and in the far right TD is these div tags. You may not see the issue unless you setup a similar situation.

so for example..

<table width="100%">
<tr>
<td></td>
<td></td>
<td style="width:100px;"><div class="FRRatewrapper"><div class="FRRatePOPUPon">asdf..</div></div></td>
</tr>
</table>


My css..

.FRRatewrapper 
{
    z-index:1;
    position:absolute;
     
    }      
    
    
.FRRatePOPUPon 
{
    position:relative;
    z-index:2;
    margin-top:1px;
    width:300px;
    height:170px;
    right:229px;
    background-color:yellow;
    border:1px solid #FFF;
    color:#222;
    font-size:10px;
    text-align:center;
    font-weight:bold;
    padding:4px; 
    background-image:url('../../../layout_images/rate_me_bg.png'); 
    background-repeat:repeat-x; 
    }

This post has been edited by websitepro: 24 January 2012 - 10:38 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Problem using CSS right: in div popup. Makes page width larger.

#2 websitepro  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 28-December 11

Re: Problem using CSS right: in div popup. Makes page width larger.

Posted 24 January 2012 - 11:13 AM

Nevermind. I got it figured out.

changed relative to absolute, then padded the left side of the wrapper to position where I needed.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1