views:

1401

answers:

7

Hello,

In an HTML page, if I align some <div>s with "right: 0px", they all look very nice, as I expect. However, if I make the browser window smaller and the horizontal scroll bar appears, when I scroll the page to the right, I see an unexpected white space (instead of the background colors of my <div>s). It seems that my <div>s are aligned relative to the visible area of the page. See the sample code below:

<html>
    <head>
     <style>
     <!--
     #parent {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      background-color: yellow;
     }

     #child {
      position: absolute;
      left: 100px;
      top: 300px;
      width: 1000px;
      height: 400px;
      background-color: blue;
     }
     -->
     </style>
    </head>
    <body>
     <div id="parent"><div id="child">some text here</div></div>
    </body>
</html>

Is there any way to make the "right: 0px" property align the controls relative to the size of the entire page, not only the visible area?

Thanks.

A: 

if you add

html{ border: 3px solid red }

to your stylesheet, you'll see that you are setting the 'right' property to the edge of the page.

I think you need to rethink your strategy. What are you trying to achieve?

meouw
+3  A: 

The Problem is the "absolute" position in the parent element, because it's scrollable per definition.

If you set the position to "fixed" and an additional attribute overflow to "scroll", it should look like expected.

#parent {position: fixed;
         overflow: scroll;         
         left: 0px;
         top: 0px;
         right: 0px;
         bottom: 0px;
         background-color: yellow;
        }
Peter
Thanks. Your answer took me to the correct direction. I guess I didn't explain enough what I wanted. In the end I added two attributes to "#parent": "min-width: 1100px; min-height: 700px;". Basically I don't want the size of the parent to become smaller than the area covered by its children.
Gabi
A: 

Dont use absolute position unless you absolutely must. Use margins and paddings instead. And dont forget to reset margins and paddings so you dont start with whatever the browser has as default.

Kim
A: 

Right? Bottom? Are sure these are even real CSS attributes? Normally you would just set top/left and then width/height...

Andrew G. Johnson
http://www.w3schools.com/css/pr_pos_right.asphttp://www.w3schools.com/css/pr_pos_bottom.asp
Max
Okay but what is the logic in using both left, right, bottom and top?
Andrew G. Johnson
A: 

Is it necessary to use absolute positioning in your case? Otherwise you can remove the left and right properties and simply use width: 100%;

GoodEnough
Assuming border, margin, and padding are all set to 0, that could work. Otherwise those items will extend beyond the visible page. Remember width is the rendered width before all of those are applied to the outside in the box model.
Adam Bellaire
A: 

To bad nodody could give you a decent answer. I'm looking for an answer aswell. Im expiriencing the same kind of problem in my TreeView webcontrol. It looks like text-align:right, right:0px, and float:right on the parent all have the same problem. They align to the visible area, not within the scrollable area. Except for float in firefox only, but this option does not show scrollbars. You can understand that it's possible to have a treeview with horizontal scrollbar, and an align right option is then simply bugged.

A: 

hi my answer is i want change align scroll? example "right align" scroll.

ex {overflow: scroll}

amin