Question

So I have the following simple layout where I have the main content in a centered div that can expand dependning on content and helptext in two columns on either side. However when zooming or resizing the window the left one disappears and cant be scrolled to while the right one stays in the window and can be scrolled to.

I would have guessed the problem to be part of the absolute positioning but that doesnt explain the right one remaining visible as I zoom in.

Ultimately I want a centered div, expanding depending on content, and one div on either side of it, preferably without fixed (max)width.

<body style="text-align: center">
    <div style="display: inline-block; position:relative">
        <div style="display:block; border:solid red;">
            Here's some text to fill the void in this centered div.
            Here's some text to fill the void in this centered div.
            <div style="position: absolute; right:100%; top:0; border:solid black;">
                This text disappears when window is resized/zoomed and cant be seen
            </div>
            <div style="position: absolute; left:100%; top:0; border:solid blue;">
                This div remains visible when resizing/zooming
            </div>
        </div>
    </div>
</body>

fiddle http://jsfiddle.net/w774hfay/

Answer 1

I've taken your comments into consideration in developing my answer.

Your fiddle, updated: http://jsfiddle.net/w774hfay/7/

<body>
    <div style="position:relative; width: 100%;">

        <div style="border: 3px solid red; width: 50%; margin: 0 auto;">
        Here's some text to fill the void in this centered div. 
        Here's some text to fill the void in this centered div.

        <div style="position: absolute; right:-10px; top:0; border: 3px solid black;
        width: 25%;">
        This text disappears when window is resized/zoomed and cant be seen
        </div>

        <div style="position: absolute; left:-10px; top:0; border: 3px solid blue;
        width: 25%;">
        This div remains visible when resizing/zooming
            </div>
        </div>
    </div>
</body>

Hope this helps. If you need something adjusted just leave a comment below.

UPDATE

Based on your questions in your comment, I have updated my answer below.

Why does the black left positioned box disappear outside the view but the blue one can be scrolled to?

Because this line in your code:

<div style="display:block; border:solid red;">

tells the browser to give this element a width of 100%. That's what block elements do by default, they occupy the full width of their container.

Then you absolutely positioned the two child divs. Absolute position takes the elements out of the normal flow, so the parent element essentially ignores them.

Then you positioned the two child divs with a value of 100% each, which results in their location off-screen.

You can only scroll right because the browser reads from left to right starting with the first element in the normal flow.

Is it possible to have it only stretch to fit the content of the left/right containers, no fixed width, and still "glued" to the sides of the center div?

Yes, there are various ways to do this. One simple and reliable way to keep elements next to each other on the same line is to use tables (either HTML or CSS). In my example below I've used CSS table properties.

REVISED DEMO

<div style="display: table;">

    <div style="display: table-row;">

        <div style="display: table-cell; border: 3px solid black;">
        This text disappears when window is resized/zoomed and cant be seen
        </div>

        <div style="display: table-cell; border: 3px solid red;">
        Here's some text to fill the void in this centered div.
        Here's some text to fill the void in this centered div.
        </div>

        <div style="display: table-cell; border: 3px solid blue;">
        This div remains visible when resizing/zooming
        </div>

    </div>
</div>

In adjusting your table cells make sure to consider these important properties:

border-collapse
border-spacing
padding

Good luck!

Why do absolute divs disappear on the left but not right side of a centered div?

1 个答案: