Home/ Questions/Q 8057067
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T08:54:44+00:00

I have two quite narrow (width:400 px) divs that should be stacked vertically if

  • 0

I have two quite narrow (width:400 px) divs that should be stacked vertically if there is sufficient vertical space in the browser window. If the browser height is too small and there is space enough to the right, the “bottom div” should float to the right of the top div.

In a sense I’m asking for the opposite to “float:left”. float:left align divs horizontally if there is sufficient horizontal space in the browser window and only float divs below the others if there only is available space below them.

Thanks for any suggestions!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Depending on the level of browser support you require, a simple media query may solve your problem:

    <!doctype html>
<html>
    <head>
        <style>
            /* SET THE DEFAULT RULES FOR SHORT SCREENS */
            .bottom-floaty {
                height:200px;
                width: 400px;
                margin: 15px; padding: 10px;
                outline: 1px dashed #aaf;
                }
            /* HERE FOLLOWS THE MAGICAL MEDIA QUERY FOR TALL SCREENS */
            @media all and (max-height: 500px) {
                .bottom-floaty { float:left; }
            }
        </style>
    </head>
    <body>
        <div class="bottom-floaty">
            I'm a sometimes floaty div
        </div>
        <div class="bottom-floaty">
            I'm also a sometimes floaty div
        </div>
    </body>
</html>

    Here’s the effect I see with that:
    In a tall window
    In a short window

    The CSS3 media queries let you set any rules css you like based on the viewport height. The w3c has lots of information about media queries.

    A relevant snippet regarding viewport height:

    The ‘height’ media feature describes the height of the targeted display area of the output device. For continuous media, this is the height of the viewport including the size of a rendered scroll bar (if any). For paged media, this is the height of the page box.

    A specified cannot be negative.

    Sometimes I find the Mozilla Developer Network a bit more accessible, but in this case they provide basically the same information.

    Do you need to support old browsers who can’t render media queries? It should be fairly simple to write a javascript polyfill can have the same effect, especially using a library like jQuery.

    Edit

    I revised my code example to more closely match your problem. You commented:

    Jashwant: putting the div below the other is always preferred. So it’s only in the case that there’s space to the right but not at the bottom, that div2 should go to the right of div1. – Jonas

    And I also set the widths to 400px as in your example.

    Now it only floats left if the screen is too short for them to be vertical and there is sufficient room on the right to fit both. Otherwise it’s always vertical.

    • 0