Image formatting issue

I am building a website for school based on a text book and am running into an issue when adding pictures. Please see attached photo. My images are seeming to overlap the next heading and not stay inside the div. The div sizes to the text but won’t size to the image. What can I do to fix this? I appreciate any tips. Thanks in advance.

Here is my code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="_css/javajam.css" type="text/css" />
<title>JavaJam Coffee House</title>
</head>
<body>

<div id="header">
<a href="index.html"><img src="../CaseStudyStarters/CaseStudyStarters/JavaJam/javalogo.gif" alt="Home" width="600" height="120" border="0" align="middle" /></a>
</div>

<!--Above is the header and below is the navigation bar-->
<div class="nav">
<a href="index.html">Home</a>&nbsp;&nbsp;
<a href="menu.html">Menu</a>&nbsp;&nbsp;
<a href="music.html">Music</a>&nbsp;&nbsp;
<a href="jobs.html">Jobs</a>&nbsp;
</div>

<div class="content">
The first Friday night of each month at JavaJam is a special night<br /> 
Join us from 8pm to 11pm for some music you won't want to miss.


<h2>
January
</h2>

<div class="details">
<a href="_images/melanie.jpg"></a><img src="_images/melaniethumb.jpg" alt="Melaine" align="right"   />
Melanie Morris entertains<br /> with her melodic fold style.<br /> Check out the podcast!<br /> CDs are now available.

</div>

<h2>
February
</h2>

<div class="details">
<a href="_images/greg.jpg"></a><img src="_images/gregthumb.jpg" alt="Greg"align="right"   />
Tahoe Greg's back from him tour<br />New Songs<br />New Stories<br />CDs are now available

</div>

<!--This is content end div-->
</div>

<!--This is copyright and contact material-->
<div id="footer">
Copyright &copy; 2011 JavaJam Coffee House<br />
<a href="mailto:aaron@andino.com">Aaron@Andino.com</a>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

#header {
		text-align:center;
		background-color:#ccaa66;
}

body {
	font-family:Verdana, Geneva, sans-serif;
	color:#330000;
	background-image:url(../../CaseStudyStarters/CaseStudyStarters/JavaJam/background.gif);
	padding-left : 40px;
	padding-right: 40px;
	background-color:#ffffcc;
	
}

.nav { 
		text-align:center;
		background:#FFFFCC;
		padding-top: 15px;
		padding-bottom:15px;	
}

.content {
		background-color:#FFFFCC;
		padding-left: 20px;
		padding-right: 20px;
}

h1 {
	background-color: #ccaa66;
	color:#000000;
	text-align:center;
}

h2 {
	background-color:#ccaa66;
	padding-bottom:5px;
	padding-left:10px;
	font-size:1.2em;
}

#footer { 
		background-color: #ccaa66;
		color:#000000;
		font-size:.60em;
		text-align:center;
		font-style:italic;
	
}

.details {
	padding-left:20%;
	padding-right:20%;
}
.img { 
}

One easy solution is to add the line in red:

.details {
	padding-left:20%;
	padding-right:20%;
        [COLOR="Red"]overflow: hidden;[/COLOR]
}

That works great. Thanks so much. Know of any way by HTML you could solve this problem? I know that CSS is the way to do this as far as styling but we are learning more about CSS formatting later so how could this be done via HTML? If possible.

Layout isn’t an HTML issue, but a CSS issue. So it’s best not to try to make this an HTML issue. If you do that, you are in danger of ending up back in the dark days of table layouts, and you really don’t want to go there. :slight_smile:

Oh, I know haha. I was just trying to figure out how they did it in my textbook because I sat and stared at my code for hours trying to figure it out but if they meant for mine to look like that, it would easily explain why the next chapter is tables…yuck. Bad habit for formatting, I’ll make sure to resist. Thanks so much for your help/advice. I appreciate it.:slight_smile:

Yep, the basic rule is HTML for defining content types and CSS for styling the content (that is, the visual appearance in the browser). The issue here is that a container doesn’t wrap around its floated content by default, so unless you apply some CSS artifice, the float will hang out if there’s not enough other content in the container. Overflow hidden is the easiest way to force the container to enclose the float. For situations where you actually want some content to hang out of the container, there are other methods, most notably the method generically known as “clearfix”.

HTML is a Hyper text markup language in which CSS also plays an important role as the images are the crucial content of the website. ralph.m is right CSS for styling the content (that is, the visual appearance in the browser). The issue here is that a container doesn’t wrap around its floated content by default, so unless you apply some CSS artifice, the float will hang out if there’s not enough other content in the container. Overflow hidden is the easiest way to force the container to enclose the float.