CODEWITHSUNDEEP
htmlcsscss-float
John Doughbutter
John Doughbutter

Reputation: 23

Text going under image within a div

So I'm trying to float three images in one Div. The first one is positioned in the upper left and it doesn't seem to cause any problems, but I simply cant manage to get the text to wrap around the second image (which is supposed to go in the middle right) The div in question is the "TB2" div. I'd appreciate if anyone could help me out. https://jsfiddle.net/so9n5r4b/

Here is my HTML:

body {
  background-image: url("Vlootbackground.png");
  background-repeat: repeat-x;
}
h1 {
  position: relative;
  left: 20px;
  top: 5px;
}
ul {
  margin: 0 auto;
  width: 700px;
  position: relative;
  bottom: -120px;
  right: 71px;
  color: white;
  font-size: 13px;
}
li {
  display: inline;
  padding: 17px;
}
#Banner {
  background-image: url("Vlootheader.jpg");
  background-repeat: no-repeat;
  width: 800px;
  height: 269px;
  position: relative;
  top: -22px;
  left: 350px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.UH2 {
  position: relative;
  left: 20px;
  top: -20px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#TB2 {
  background-color: white;
  margin-top: -18px;
  width: 800px;
  height: 1000px;
  position: relative;
  left: 350px;
  top: -24px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
h2 {
  position: relative;
  left: 20px;
  top: 10px;
}
.GSimage1 {
  float: left;
  position: relative;
  left: 20px;
  padding-right: 40px;
  margin-bottom: 20px;
}
.GSimage2 {
  float: left;
  position: relative;
  top: 490px;
  margin-bottom: -490px;
}
.GT1 {
  margin-left: 20px;
  font-size: 18px;
  margin-right: 20px;
}
.GT2 {
  margin-left: 20px;
  margin-right: 20px;
  font-size: 18px;
}
<!DOCTYPE html>
<html lang="nl">

<head>
  <link rel="stylesheet" type="text/css" href="GSstyle.css">
  <title>De vloot</title>
  <meta charset="UTF-8">
</head>

<body>
  <div id="Banner">
    <h1>Geschiedenis</h1>
    <p class="UH2">Uit de tijd dat Marco zijn Polo aan had</p>
    <ul>
      <li>Start</li>
      <li>Geschiedenis</li>
      <li>Kruisers</li>
      <li>Vliegdekschepen</li>
      <li>Onderzeeërs</li>
    </ul>
  </div>
  <div id="TB2">
    <h2>Er is niet veel veranderd.</h2>
    <img src="GSimage1.jpg" alt="Geschiedenis image 1" class="GSimage1">
    <img src="GSimage2.jpg" alt="Geschiedenis image 2" class="GSimage2">
    <p class="GT1">text</p>
  </div>
</body>

</html>

Upvotes: 1

Views: 1151

Answers (1)

Pianoc
Pianoc

Reputation: 797

I'm not certain what your question is asking. I have updated your fiddle to float the image to the right with the text wrapping around it. Let me know if this is what you are looking for:

https://jsfiddle.net/so9n5r4b/3/

.GSimage2{
  float: right;
    position:relative;
    left:20px;
    padding-right:40px;
    margin-bottom:20px;
}

I would also recommend adding each paragraph you have in it's own <p>...</p> as I have done in this fiddle.

Upvotes: 1

Related Questions