cleo master cleo master - 1 month ago 17
HTML Question

my pictures are out of the div

I have a problem, I have a div and it's background color is black. I put two pictures in the div but when I see them they are in list orders, I said ok and I wanted to be in the div but side by side, and so i did "float: left;" but now they are completely out of div!!!! Please help!!!!!



<!DOCTYPE html>
<html>
<head>
<style>

div.images {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

#styles {
margin: auto;
background-color: black;
color: white;
padding: 20px;
width: 60%
}

</style>
</head>
<body>
<div id="styles">
<h1>First heading.</h1>
<p>Check check</p>
<hr>
<p>Some pictures</p><br>
<div class="images">
<img src="Nabeel1.jpg" width="200" height="200">
<div class="desc">Tom Clancy's</div>
</div>
<br>
<div class="images">
<img src="usama.jpg" width="200" height="200">
<div class="desc">Tom Clancy's</div>
</div>
</div>
</body>




Answer

You need element with clear:both; at the end of floating elements sequence.

<!DOCTYPE html>
<html>
<head>
<style>

div.images {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
  overflow:hidden;
}

#styles { 
        margin: auto;
        background-color: black;
		color: white;
		padding: 20px;
		width: 60%
}

</style>
</head>
<body>
<div id="styles">
<h1>First heading.</h1>
<p>Check check</p>
 <hr>
 <p>Some pictures</p><br>
 <div class="images">
      <img src="Nabeel1.jpg" width="200" height="200">
	  <div class="desc">Tom Clancy's</div>
 </div>
 <div class="images">
      <img src="usama.jpg" width="200" height="200">
	  <div class="desc">Tom Clancy's</div>
 </div>
  <div style="clear:both"></div>
</div>
</body>