Marcel Schulz Marcel Schulz - 5 months ago 14
CSS Question

Wrap a Vertical bar with the Content

i'm trying to wrap the content and a vertical bar.
right now when the Viewport increate the Content and the Bar move away from each other (the Bar to the right and the Content to the left)
But i want them to Seperate to a specific amount and stay like that.
This is my Screendesign:
enter image description here

And that would be my Code right now:

<!DOCTYPE HTML>
<body>
<div id="wrapper">
<div id="header">
</div>

<div id="navhm">
</div>

<div id="space">
</div>
<div id="wrapperres">
<div id="pfosten">
</div>

<div id="contwrap">
<div id="content">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>



And thats my CSS
http://codepen.io/Blackcan/pen/AXovrL

Any Advices are welcome!

Answer

I would use flexbox for this.

Let's say your HTML looks like this:

    <div class="container">
        <div class="content-left">
            <div class="nav-fixed">
            </div>
            <div class="content">
            </div>
        </div>
        <div class="social-media">
        </div>
    </div>

Then you could use in your CSS:

    .container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    .content-left {
        flex: 0 0 60vw;
        overflow-y: scroll;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .social-media {
        flex: 0 0 20vw;
    }

    .nav-fixed {
         flex: 0 0 40px;
    }
   .content {
        flex: 0 0 300px;
    }

Codepen: https://codepen.io/J-DD/pen/QErjLE

More about flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://thenewcode.com/780/A-Designers-Guide-To-Flexbox