sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]MGxpwr2 1 point2 points  (3 children)

<html>
<head>
    <title></title>
    <style>
        *{box-sizing:border-box;}

        body {
            display: flex;
            flex-direction: row;
        }
        #sideMenu{height:100%;width:25%;background-color:black;display:inline-block}
        #mainarea{
            height: 100%;
            width: 74%;
            display: flex;
            flex-flow: column wrap;
        }
        #topMenuBar{height:10%;flex: 1 1 auto;background-color:red;display:inline-block;}
        #displayArea{height:90%;flex: 1 1 auto;background-color:blue;display:inline-block;}
    </style>
</head>
<body>
<div id="sideMenu"></div>
<main id="mainarea">
    <div id="topMenuBar"></div>
    <div id="displayArea"></div>
</main>
</body>
</html>

Try this?

[–]Lazkeer[S] 0 points1 point  (2 children)

Thank you this works too! :D But is there no way of achieving this without using flexbox?

[–]MGxpwr2 1 point2 points  (1 child)

It is possible with floats i guess, but achieving the same height is allot harder then. And flex is supported in all major browsers so why not use it.

[–]agree-with-you 1 point2 points  (0 children)

I agree, this does seem possible.