CODEWITHSUNDEEP
htmlcss
haldagan
haldagan

Reputation: 911

Set the body width to 100% of document's

So i have:

    <body style="border:1px solid red;width:100%;">
        <div style="position:absolute;left:2000px;">
            1
        </div>
    <body>

Is there any way to make body width to be 100% of document (including "scrolling space") instead of 100% of inner window width in this case? I mean i need the result as if i applied "width:2000px;" to the body, but without knowing this number.

I know, that it will take one line of code in js and still i wonder, if i can do this with pure css.

To clarify: When i write "width:100%;" i expect, that body width will stretch up to 2000px (to include that absolutely positioned div), but it stretches only to 1024px (browser window width).

Upvotes: 2

Views: 3217

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

There is a logical puzzle with this layout.

<body style="background:red;width:100%;">
    <div style="position:absolute;left:2000px;">
       1
    </div>
<body>

Because the inner div is positioned absolutely, it is out of the document flow, and therefore, the parent block container, <body>, cannot compute a width based on the absolutely positioned child element.

By assigning a percentage width of 100% to <body>, the width is actually being computed based on the width of the root element, in this case, <html>, which may in turn, inherit its height from the viewport.

This effect cannot be achieved by CSS alone.

If you need the inner div to be absolutely positioned, then you will need some JavaScript/jQuery functionality to determine the width of <body> based on some custom rules that you want to specify.

Upvotes: 3

Boynux
Boynux

Reputation: 6222

The problem is position: absolute what you can do is wrapping your div inside another one like this:

<body style="border:1px solid red;width:100%;">
    <div style="width:2000px;">
        <div style="position:absolute;left:2000px;">
            1
        </div>
    </div>
<body>

because when you make any element absolute is not belongs to is parent anymore and it becomes separate element in document (in document flow). If this answer is not what you want, tell me what you want exactly to do (what is your design decision) then I can give you alternative designs to solve your problem.

Upvotes: 1

relic
relic

Reputation: 1692

The width property doesn't have anything to do with the objects' child elements. Additionally, by absolute positioning that element, it actually causes the parent to COMPLETELY ignore any size parameters of that particular child element. But even with a relatively positioned object with an offset, only the initial position of the element would have an impact on its parent and not the offset location of it.

Setting width to 100% will cause it to fill 100% of its parent container, in this case the <html> element. And by explicitly stating a width, even if you had a large amount of unwrapped content inside that container, your width would actually be locked at 100% (or the width of the browser window) regardless of said child content.

You could TRY and set the width to 200%, which would cause it stretch to the right beyond its parent container. But this width would not be driven by the absolute positioned child element, and may not be responsive enough for your needs.

As was already stated above, there is no pure CSS solution for what you're trying to do and you'll need to use at least some javascript to accomplish what it sounds like you're trying to accomplish.

Upvotes: 0

Related Questions