Geek asks and answers

CSS: "float: bottom" if vertical space is available. "float: left" otherwise

I have two fairly narrow (width: 400 pixels) divs that should be stacked vertically if there is sufficient vertical space in the browser window. If the height of the browser is too small and there is enough space on the right, the "lower div" should float to the right of the upper div.

In a sense, I ask for the opposite "float: left". float: left align divs horizontally if there is sufficient horizontal space in the browser window, and only floating divs below the rest, if available only below them.

Thanks for any suggestions!

+5
source share
2 answers

:

<!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>

, : In a tall windowIn a short window

- CSS3 css, , . w3c -.

:

"height media" . , ( ). .

.

Mozilla Developer Network , .

, -? javascript polyfill , jQuery.

Edit

, . :

Jashwant: div . , , , div2 div1. -

400 , .

, , , , . .

+8

float:left;, DIV . float left. , clear:both;

+3

More articles:


All Articles