如何相对于另一个 div 容器对齐 div 容器？

Question

I have a little info board that contains two div containers, one is a dynamicly wide list and the other ist a static iframe. They should be both aligned to the right for layout reasons. My question is: how do I implement that?

 #anwesendheitsliste_container { font-size: 22px; position: absolute; float: right; margin-right: 10px; right: 3px; top: 170px } .toc_title { text-align: center } #list { text-align: start } #wwidget { position: relative; top: 250px; /* right: 350px;*/ margin-right: 10px; margin: 10px; }

 <div id="anwesendheitsliste_container"> <p class="toc_title">Anwesende Wenigkeiten&nbsp&nbsp</p> <ul class="toc_list"> <div id="list"> <li>Lorem Ipsum</li> <li>Dolor sit Amet</li> </div> </ul> </div> <div id="wwidget"> <iframe src="http://info-board.fks.tuhh.de/site/wwidget.html" height="220px" width="220px" frameborder="0" seamless></iframe> </div>

screenshot

Answer 1

use this code

 .right-align{ display: flex; flex-direction: column; align-items: end; }

 <div class="right-align"> <div id="anwesendheitsliste_container"> <p class="toc_title">Anwesende Wenigkeiten&nbsp&nbsp</p> <ul class="toc_list"> <div id="list"> <li>Lorem Ipsum</li> <li>Dolor sit Amet</li> </div> </ul> </div> <div id="wwidget"> <iframe src="http://info-board.fks.tuhh.de/site/wwidget.html" height="220px" width="220px" frameborder="0" seamless></iframe> </div> </div>

Answer 2

If you just want both on the right you can try this, hope it helps, here I am not adding anything in the code, just changing the div that wraps the iframe

 #anwesendheitsliste_container { font-size: 22px; position: absolute; float: right; margin-right: 10px; right: 3px; top: 170px } .toc_title { text-align: center } #list { text-align: start; } #wwidget { position: relative; /* right: 350px;*/ margin-right: 10px; margin: 10px; }

 <div id="anwesendheitsliste_container"> <p class="toc_title">Anwesende Wenigkeiten&nbsp&nbsp</p> <ul class="toc_list"> <div id="list"> <li>Lorem Ipsum</li> <li>Dolor sit Amet</li> </div> </ul> <div id="wwidget"> <iframe src="http://info-board.fks.tuhh.de/site/wwidget.html" height="220px" width="220px" frameborder="0" seamless></iframe> </div> </div>