Hi,
If an element contains only floats then it will have no height unless you use a float clearing technique because floats are effectively removed from the flow. This would seem to be the main problems that you are encountering.
The easiest method to clear floats is to add overflow:hidden to the float's parent and that will make it contain its floated children (ie7 and under need haslayout instead - see the CSS FAQ on floats).
Avoid heights on your columns because content will never be an exact height and it should be the content that dictates the height and not you. Content needs room to breathe and expand when text is resized so heights on text content is really a big no no.
Try and add some structure to your page as you have no h1 heading (the most important thing on any page) and then some way down the page you have h5 headings. You can't have an h5 heading if there have been no h1,h2,h3 and h4 headings previous to it because that makes no sense. Headings must be logical.
The details right image is floating right but you will need to clear any content to the right if you want it at the edge (clear:right).
Don't use classnames like .pinkfont as that is bad practice. Use a more generic but still descriptive term (such as .highlight, .warning etc..) so that the class name doesn't rely on its appearance. The reason is that if you decide that you would like the text green at a later date then you would have a class called .pinkfont which gives you green text - which is clearly nonsense.
You also have a lot of spans and breaks for your content which would seem incorrect as it is more likely to be paragraphs or divs that you should be using but as you haven't put in the real content it's hard to say what should be what.
In most cases it's the real content that defines what html elements you should be using and not vice versa.
I've removed a couple of heights and cleared a couple of floats and added some background colours to see where everything is placed but this needs a lot more work and needs an example of real content so that all the correct html elements can be used instead of those spans and breaks that are currently in place.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxx</title>
<meta name="keywords" content="xxx" />
<meta name="description" content="xxx" />
<link rel="stylesheet" type="text/css" href="main.css" />
<style type="text/css">
.center {
text-align: center;
}
.left {
text-align: left;
}
.bold {
font-weight: bold;
}
.calendartable {
font-size: xx-small;
background-color: #DDEAFF;
}
.calendartable td{vertical-align:top}
.font {
font-size: xx-small;
}
.pinkfont {
color: #FF0066;
}
.contactinfo {
font-size: small;
float: right;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #808080;
}
</style>
<link rel="stylesheet" type="text/css" href="main2.css" />
<style type="text/css">
html, body {
border:0;
margin:0;
padding:0;
}
body {
background-color: #D2FFBF;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-decoration:none;
}
#container {
border: 1px solid #999999;
width: 800px;
background-color: #FFFFFF;
margin: 10px auto 10px auto;
padding: 10px 5px 5px 10px;
overflow: hidden;
}
#logo {
background:red;
width:100%;
overflow:hidden;
}
#logo h1{margin:0}
#masthead {
border-top:2px solid #8CFE68;
border-bottom:2px solid #8CFE68;
}
#topnav {
height: 20px;
}
#detailsleft {
width: 305px;
position: relative;
float: left;
padding-top: 5px;
margin-bottom: 5px;
background:green;
}
#detailsright {
width: 480px;
position: relative;
float: right;
font-size: small;
background-color: #FFFFFF;
padding-top: 5px;
padding-left: 5px;
margin-bottom: 5px;
background:blue;
}
#footer {
font-size: small;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 800px;
border-top:2px solid #8CFE68;
clear:both;
}
#horizontal-nav{
margin:10px 0;
padding:0;
list-style:none;
}
#horizontal-nav li{display:inline;margin:0 10px 0 0}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<h1><img alt="Site Name here" src="siteImages/DCHFH_logo%20new.jpg" width="295" height="107" style="float: left" /></h1>
<div class="contactinfo">xxx<br />
xxx<br />
xxx<br />
xxx<br />
<a href="mailto:xxx">XXX</a></div>
<div id="contactinfo"> </div>
</div>
<div id="masthead"><img alt="tophead" src="siteImages/top_head800px.jpg" width="800" height="129" /></div>
<ul id="horizontal-nav">
<li><a href="index.html">Home</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xxx</a></li>
</ul>
<div id="details">
<div id="detailsleft">
<div id="detailsleftcol">
<table cellspacing="12" class="calendartable" cellpadding="0">
<tr>
<td colspan="3" class="center bold">2011 Calendar of Events</td>
</tr>
<tr>
<td>Feb 6</td>
<td>Winter Fest<br />
xxx</td>
<td>Parade 10:30</td>
</tr>
</table>
</div>
</div>
<div id="detailsright">
<h4 class="contactinfo">xxx.org</h4>
<p><strong class="pinkfont">xxx</strong><br />
<img class="" alt="test" src="siteImages/BW_handimage.jpg" width="200" height="133" style="float: right;clear:right;background:yellow" /><br />
xxx,<br />
xxx,<br />
xxx,<br />
xxx.<br />
<br />
xxxxxxxxxxxxxx.<br />
<br />
xxxxxxx <span class="bold">xxxxxx</span>. xxxxxxxxxx<br />
<a href="Articles/xxx_application2011.pdf">xxx</a> xxx</p>
<p class="center"> ***********************<br />
</p>
<h5>XXX</h5>
<p>xxxxxxxxxx.</p>
<h5>XXX</h5>
<p>xxxxxxxxxx <span class="font"><a href="Articles/Perspective.pdf">Perspective</a></span></p>
<h5>XXXXX.</h5>
<p>xxxxxxxxxxxxx<br />
<a href="Articles/xxx.pdf">XXX</a>.<br />
</p>
<p class="center"><img alt="xxx" src="siteImages/vinyl_siding_install.jpg" width="250" height="193" /></p>
<p class="left bold">xxxxx.</p>
</div>
</div>
<div id="footer">
<p class="textalign"><img alt="logo" src="equal_opportunityLogo.JPG" width="80" height="85" style="float: left" /><br />
xxxx<br />
xxxx <br />
xxxx <br />
xxxx.<br />
<br />
<br />
<span class="font">Copyright © 2011 xxx</span><br />
</p>
</div>
</div>
</body>
</html>
To recap you need to think up better classnames and then use logical html elements that suit the content you are using. If something is a heading then it should be in a heading element of the correct level. (Never use elements just because of what they look like).
If something is a paragraph then use a p element. (Addresses can go in the address element.) Breaks should only be used to break lines up and not simply to make space or to create new paragraphs. Most pages will have very few breaks as they are only needed for things like poems, addresses, and form elements. The rest of the time you can use margins on existing elements to make the required space.
Rather that attaching yout code you can simply paste it into code tags as I have done above but put the css in the head while testing (after testing all css should be external). We will need ot see your code eac h time you change it otherwise we won't know what you are currently working with.
Reply With Quote
Bookmarks