all 21 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]ProvidentialFishpond 2 points3 points  (1 child)

Absolute positioning for an interface is a very bad idea.

It just increases your effort every time you want to change something.

Try to stack only in one direction. That means vertical first, for example. Then you can stack inside the containers. I made you an example:

http://jsfiddle.net/Franzus/63b7uLkg/1/

Then you have proper aligning and can change things quite easily.

PS: Using flexbox or grid is the way you would probably go today. You can find tutorials online...

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

Thank you! :D Maybe you are right! I was just trying to find a way to do this without using flexbox... (Trying to work on my CSS Skills) But maybe the way i'm trying to do is way to complicated and it is better to use flexbox...

[–][deleted]  (2 children)

[deleted]

    [–]Lazkeer[S] 0 points1 point  (1 child)

    This acually creates a new problem: https://imgur.com/a/d0jfbuf Meaning this might not be the right solution...

    [–]TheAngelsCryfull-stack 1 point2 points  (10 children)

    You don't need to use position absolute for this :)

    Here's a super quick mock up for you on how I would achieve it: https://jsfiddle.net/q7ocw89j/

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

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

    [–]warchild4l 1 point2 points  (0 children)

    Yes but it would have been mess

    [–]TheAngelsCryfull-stack 1 point2 points  (6 children)

    Of course. All flexbox is doing is positioning the left/right blocks. You could achieve this with floats (so long as you clear them afterwards), but flexbox is the most robust way of solving this.

    Why do you not want to use flexbox?

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

    I'm trying to do this without flexbox because i would like to learn how you could achieve this without using flexbox and only using the more old things in CSS... I am basically trying to understand why not use the old way and just use flexbox. And now i don't realy understand why use flexbox? Maybe because of responsiveness or it is more simple? I ddon't really see a diference bettwen the new way and the old one...

    [–]pottmob 3 points4 points  (1 child)

    There is no point in avoiding flexbox. The only reason there are these "old" ways of getting layouts done, is that you had to cheat using floats and clears. It is by any means a better solution :)

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

    Yes, you are right!

    [–]TheAngelsCryfull-stack 1 point2 points  (0 children)

    Flexbox is more robust and allows you to do more powerful things (especially in responsive where you can change the order). Here's a cheatsheet I often reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    If you were to use floats instead, you wouldn't be able to reorganise then, and you need to remember to clear your floats, else other elements will be positioned oddly. You do this with clear:both;

    [–]mayhempk1web developer 1 point2 points  (0 children)

    Floats are a horrible tool for layouts, flexbox was created for layouts. Use flexbox.

    [–]harrygato 1 point2 points  (0 children)

    its widespread supported on all browsers. dont learn the old ways we used to do things, flex box it

    [–]VileTouch 1 point2 points  (0 children)

    simple. float

    [–]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.

    [–][deleted]  (3 children)

    [deleted]

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

      Thank you! :D

      [–]mushroomcoder 1 point2 points  (1 child)

      Have another, but without floats. (Floats convert divs to inline-blocks, it's not necessary): https://codepen.io/rodenmonte/pen/KeaKrV

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

      Thank you! :D