Geek asks and answers

Transpose div elements using CSS

I will go for example.

<!DOCTYPE html>
    <head>
        <title>Transposing div using CSS</title>

        <style>
            div#wrapper {
            }

            div#menu {
                border:blue solid 1px;
            }

            div#main {
                border:red solid 1px;
            }
        </style>
    </head>

    <body>
        <p>How do we show the menu div immediately after the content div?</p>
        <div id="wrapper">
            <div id="menu">Menu</div>
            <div id="main">Content</div>
        </div>
    </body>
</html>

In the browser, the menu div will be the first in the stream. Now let's say that I need to change the layout so that the "Menu" matches the contents of the div. How can this be done using only CSS. This means that there is no change in HTML (without detecting the user agent) and JavaScript code.

The basic CSS method for positioning elements is to use the float attribute: right | left. It works well to move elements relative to their bounding box, but I'm looking at moving an element at the end of its successor in a normal flow.

. , - , , iPhone. - , , iPhone, , , .

iPhone Android (WebKit). Internet Explorer ..

+3
2

(, , ), , : , . :

div#wrapper {
    height: 100%;
    padding-bottom: 100px;
    position: relative;
}

div#menu {
    border:blue solid 1px;
    position: absolute;
    bottom: -2px; /*to offset the border pxs*/
    height: 100px;
    width: 100%;  
}

div#main {
    border:red solid 1px;
}

: http://jsfiddle.net/3ZheQ/

+2

, . , .menu .menu_section div .header. margin-top div .menu position:relative .header. - .menu .menu_section.

position:absolute .menu_section, 0. .menu , .menu_section .

, z- ( Internet Explorer, , , ).

0

More articles:


All Articles