如何修复居中容器旁边的 DIV 容器 - CSS

Question

I've a simple DIV-Container for the main-content of the webpage. IE

#main { width: 50%; margin: 0 auto; }

Now I would like to fix another container, right and fixed at the top of the #main-Container. See Screenshot:

Answer 1

You can do something like the following using CSS Flex:

 .flex-container { display: flex; width: calc(66.66% - 20px); float: right; }.main { flex: 1; color: white; text-align: center; margin-right: 33.33%; }.main:first-child { width: 50%; margin: 0 auto; margin-right: 10px; }.red { background-color: red; height: 200px; line-height: 200px; }.green { background-color: green; height: 100px; line-height: 100px; max-width: 15%; }

 <div class="flex-container"> <div class="main red"> Main content </div> <div class="main green">? </div> </div>

Answer 2

Add the green div inside the centered div and style it.

<div id="main" style="position:relative;">
   <div id="green_div" style="position:absolute; left:100%; margin-left:20px; background:green;">
   <div>
</div>