John Doughbutter John Doughbutter - 1 month ago 5
CSS Question

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:

<!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>


And here is my css:

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;
}

Answer

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.

Comments