I am making a website for my grandfather. My html is a little bit rusty. I have a left column with links, a header, footer, then the main section of the page. In the main section I have a picture to the left with text directly to the right. I have the text in a <P> then i used <BR CLEAR="all"> to stop the text wrap. I am happy with how this part is but when I started a new <P> it leaves a huge gap. I need 3 <P> all together and I have huge gaps in between. I am also using a CSS sheet. I want the content of each <P> to be just under one another. Can anyone help?
HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<html>
<head>
<title>Concordia Cemetery</title>
<link rel="stylesheet" href="cemeterymain.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body id="body">
<div id="header">
<ul id="head">
<li id="ccl1">Concordia Cemetery</li>
<li id="ccl2">of Indianapolis Indiana INC</li>
<li id="ccl3">Serving Indianapolis since 1890</li>
<li id="ccl4">Beautiful, Peaceful, and Affordable</li>
</ul>
</div>
<div id="leftcol">
<ul id="links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="main">
<img id="pic1" src="entrance.jpg" Align="left">
<p id="copy1">Concordia Cemetery has been a traditional and revered place to memorialize
loved ones since 1870. For almost a century and a half, many members of the
same families have selected Concordia as a resting place near there forefathers.
As new families move into the area they continue the tradition of considering
Concordia as there own. <br>
<br>Centrally located on the Southside of Indianapolis, it
offers easy access to visitors and quiet tranquility in the mist the busy city.
<BR CLEAR="all">
</p>
<img id="pic2" src="pic2.jpg" Align="left">
<img id="pic3" src="pic3.jpg" Align="right">
<p id="copy2"> Mature trees and well maintained grounds give each section a unique setting.
Your preferred selection will not require a premium since all grave sites are priced
the same. <br><br>Michael Kallio, who has served as manager for more than 25 years, will
provide professional and sensitive consultation to all who inquire.All faiths, races and
ethnic heritages are welcome.
<BR CLEAR="all">
</p>
<p id="copy3">Concordia's continued service during its second century and beyond is guaranteed by
its conservatively managed Perpetual Care Fund.<br><br> Concordia is organized as a Not-For-Profit
Corporation affiliated with area churches.
</p>
</div>
<div id="footer">
<p>
2706 S. Meridian Street
<br>
Indianapolis, IN 46225
<br>
Phone (317)786-7733
</p>
</div>
</body>
</html>
CSS...
#leftcol{
float: left;
width: 150px;
height:500px;
padding: 10px;
background: rgb(204,255,204);
}
#header{
width: 100%;
padding: 10px;
background: rgb(51,102,255);
}
#main{
padding-top: 10px;
padding-bottom: 0px;
background: rgb(153,204,255);
}
#body{margin:0px
}
#links{
list-style-type:none;
padding:0px;
margin:0px;
text-align:center
}
#head{
list-style-type:none;
padding:0px;
margin-left: 250px;
text-align:left;
color: white
}
#footer{ text-align: center;
background: rgb(51,102,255);
margin-top: 5px;
}
#copy1{
padding-left: 500px;
padding-right: 15px;
font-family: Arial;
font-size: 10pt
}
#copy2{padding-left: 500px;
padding-right: 220px;
font-family: Arial;
font-size: 10pt;
}
#copy3{padding-left: 175px;
padding-right: 220px;
font-family: Arial;
font-size: 10pt
}
#ccl1{
font-size: 20pt;
font-family: Old English Text MT
}
#ccl2{
font-size: 13pt;
font-family: Arial
}
#ccl3{
font-size: 11pt;
font-family: Arial
}
#ccl4{
font-size: 16pt;
font-family: Arial;
font-weight: bold
}
#pic1{height: 195px;
width: 290px
}
#pic2{height: 195px;
width: 290px;
margin-left: 175px;
margin-bottom: 550px
}
#pic3{height: 225px;
width: 185px;
margin-right: 10px;
margin-bottom: 550px
}
HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<html>
<head>
<title>Concordia Cemetery</title>
<link rel="stylesheet" href="cemeterymain.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body id="body">
<div id="header">
<ul id="head">
<li id="ccl1">Concordia Cemetery</li>
<li id="ccl2">of Indianapolis Indiana INC</li>
<li id="ccl3">Serving Indianapolis since 1890</li>
<li id="ccl4">Beautiful, Peaceful, and Affordable</li>
</ul>
</div>
<div id="leftcol">
<ul id="links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="main">
<img id="pic1" src="entrance.jpg" Align="left">
<p id="copy1">Concordia Cemetery has been a traditional and revered place to memorialize
loved ones since 1870. For almost a century and a half, many members of the
same families have selected Concordia as a resting place near there forefathers.
As new families move into the area they continue the tradition of considering
Concordia as there own. <br>
<br>Centrally located on the Southside of Indianapolis, it
offers easy access to visitors and quiet tranquility in the mist the busy city.
<BR CLEAR="all">
</p>
<img id="pic2" src="pic2.jpg" Align="left">
<img id="pic3" src="pic3.jpg" Align="right">
<p id="copy2"> Mature trees and well maintained grounds give each section a unique setting.
Your preferred selection will not require a premium since all grave sites are priced
the same. <br><br>Michael Kallio, who has served as manager for more than 25 years, will
provide professional and sensitive consultation to all who inquire.All faiths, races and
ethnic heritages are welcome.
<BR CLEAR="all">
</p>
<p id="copy3">Concordia's continued service during its second century and beyond is guaranteed by
its conservatively managed Perpetual Care Fund.<br><br> Concordia is organized as a Not-For-Profit
Corporation affiliated with area churches.
</p>
</div>
<div id="footer">
<p>
2706 S. Meridian Street
<br>
Indianapolis, IN 46225
<br>
Phone (317)786-7733
</p>
</div>
</body>
</html>
CSS...
#leftcol{
float: left;
width: 150px;
height:500px;
padding: 10px;
background: rgb(204,255,204);
}
#header{
width: 100%;
padding: 10px;
background: rgb(51,102,255);
}
#main{
padding-top: 10px;
padding-bottom: 0px;
background: rgb(153,204,255);
}
#body{margin:0px
}
#links{
list-style-type:none;
padding:0px;
margin:0px;
text-align:center
}
#head{
list-style-type:none;
padding:0px;
margin-left: 250px;
text-align:left;
color: white
}
#footer{ text-align: center;
background: rgb(51,102,255);
margin-top: 5px;
}
#copy1{
padding-left: 500px;
padding-right: 15px;
font-family: Arial;
font-size: 10pt
}
#copy2{padding-left: 500px;
padding-right: 220px;
font-family: Arial;
font-size: 10pt;
}
#copy3{padding-left: 175px;
padding-right: 220px;
font-family: Arial;
font-size: 10pt
}
#ccl1{
font-size: 20pt;
font-family: Old English Text MT
}
#ccl2{
font-size: 13pt;
font-family: Arial
}
#ccl3{
font-size: 11pt;
font-family: Arial
}
#ccl4{
font-size: 16pt;
font-family: Arial;
font-weight: bold
}
#pic1{height: 195px;
width: 290px
}
#pic2{height: 195px;
width: 290px;
margin-left: 175px;
margin-bottom: 550px
}
#pic3{height: 225px;
width: 185px;
margin-right: 10px;
margin-bottom: 550px
}