CODEWITHSUNDEEP
htmlcsstextparagraph
FrankTheTank
FrankTheTank

Reputation: 62

wrapping text around div doesn't work

As you can see, I have a div (containing the picture) which is in another div. But why doesn't the text wrap around the div? Why is there some space left out on the right hand side? 1

Thank you so much for your answer!!

#table {
  clear: both;
  float: right;
  margin-top: 100px;
  margin-right: 10px;
  min-width: 100px;
  min-height: 150px;
  background-color: rgb(230, 230, 230);
  border: 1px solid black;
  right: 0;
  align: right;
}
#body {
  background-color: white;
  border: 1px solid black;
  width: 50%;
  height: 95vh;
  margin: 0 auto;
  margin-top: 20px;
  z-index: 1;
}
<body>
  <div id="article">Artikel</div>
  <div id="body">
    <div id="navigation">
      <br>
      <img src="../Logo/logomittext.svg" alt="SCHWIKI" width="100%">
      <br>
      <br>
      <a href="../index.html">Hauptseite</a>
      <br>
      <a href="Schwiki.html">Schwiki</a>
      <br>
      <a href="Änderungsprotokoll.html">Änderungsprotokoll</a>
      <br>
      <hr>
      <a href="LPI_Linux_Essentials.html">LPI Linux Essentials</a>
    </div>
    <div id="content">
      <h1>LPI Linux Essentials</h1>
      <div id="meta">
        <script language="Javascript" src="../Js/zulbearb.js">
        </script>
      </div>
      <hr>
      <div id="table">
        <img src="../Images/LPI-Essentials.jpg" alt="LPI-Essentials" width="300px">
        <table>
          <tr>
            <th>Aktuelle Version:</th>
            <td>1.5 (Prüfung 010-150)</td>
          </tr>
          <tr>
            <th>Voraussetzungen:</th>
            <td>keine</td>
          </tr>
          <tr>
            <th>Gültigkeit:</th>
            <td>Lebenslang</td>
          </tr>
        </table>
      </div>
      <p>Das Schwiki ist ein Nachschlagewerk für Themen, welche die Informationstechnologie betreffen. Es ist ein Pilotprojekt, das für die Verbesserung der Erfahrungen des Erstellers in Bezug auf das Erstellen von Websiten erstellt wurde.</p>
    </div>
  </div>
</body>

Upvotes: 2

Views: 80

Answers (1)

Jesse
Jesse

Reputation: 508

The margin-top: 100px; seems to be a typo — maybe you meant 10px? Make that change, and it'll fix it.

Also, the clear: both;, right: 0;, and align: right; can all be removed, since they're either not doing anything, or not proper syntax.

Here, I've adjusted the CSS, and doubled the amount of text on the left so it wraps more easily.

#table {
float: right;
margin-top: 10px;
margin-left: 10px;
min-width: 100px;
min-height: 150px;
background-color: rgb(230,230,230);
border: 1px solid black;
right: 0;
}
#body {
background-color: white;
border: 1px solid black;
width: 50%;
height: 95vh;
margin: 0 auto;
margin-top: 20px;
z-index: 1;
}
<div id="article">Artikel</div>
    <div id="body">
        <div id="navigation">
            <br>
            <img src="../Logo/logomittext.svg" alt="SCHWIKI" width="100%">
            <br>
            <br>
            <a href="../index.html">Hauptseite</a>
            <br>
            <a href="Schwiki.html">Schwiki</a>
            <br>
            <a href="Änderungsprotokoll.html">Änderungsprotokoll</a>
            <br>
            <hr>
    <a href="LPI_Linux_Essentials.html">LPI Linux Essentials</a>
        </div>
        <div id="content">
            <h1>LPI Linux Essentials</h1>
            <div id="meta">
                <script language="Javascript" src="../Js/zulbearb.js">
                </script>
            </div>
            <hr>
    <div id="table">
                <img src="../Images/LPI-Essentials.jpg" alt="LPI-Essentials" width="300px">
                <table>
                    <tr>
                        <th>Aktuelle Version:</th>
                        <td>1.5 (Prüfung 010-150)</td>
                    </tr>
                    <tr>
                            <th>Voraussetzungen:</th>
                            <td>keine</td>
                    </tr>
                    <tr>
                            <th>Gültigkeit:</th>
                            <td>Lebenslang</td>
                    </tr>
                </table>
            </div>
            <p>Das Schwiki ist ein Nachschlagewerk für Themen, welche die Informationstechnologie betreffen. Es ist ein Pilotprojekt, das für die Verbesserung der Erfahrungen des Erstellers in Bezug auf das Erstellen von Websiten erstellt wurde. Das Schwiki ist ein Nachschlagewerk für Themen, welche die Informationstechnologie betreffen. Es ist ein Pilotprojekt, das für die Verbesserung der Erfahrungen des Erstellers in Bezug auf das Erstellen von Websiten erstellt wurde.</p>
        </div>
    </div>

Upvotes: 2

Related Questions