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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

screenshot

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>