A couple of things here:
1.) You started off making the page valid, so you should keep with that.
1.a) divs are not valid within a table cell
2.) That is a lot of divs, and this will lead to many bad things. Nameley: a nightmare to maintain and make cross browser compatible.
3.) HTML should be semantic. In other words, it should "describe" the content it contains. Many divs used simply for layout is not a good practice. Instead create html elements for description of content, not for design. Using css you can make any element look however you want it to.
4.) With that in mind, tables are used to display "tabular" content, like an excel spreadsheet, not for layout, so ex the tables here.
With these things in mind, it is difficult for me to re-produce your problem because i'm missing your background image and i'm not too sure what you're visually trying to accomplish, but here goes:
1.) your whole document should be within (ideally) a single div. This represents a "division" of a page.
give it say a class of mainDiv
Understanding the css block model is key here, do a web search for more information on the css block model.
div elements are block-level. Meaning that they have a height that conforms to content, and a width that is the maximum allowable with of the container. In the case of "mainDiv" this container is the page.
You'll probably want the content to size for the screen resolution, but not too small or too big.
Here is an example of the css for mainDiv
Code:
#mainDiv
{
margin: 0px auto; /* center in the page */
width: 95%;
max-width: 1280px;
min-width: 1024px; /* no smaller than 1024 or your floated elements will jump */
padding: 1px;
}
display: block; is not necessary because it is inherent in div.
I see no reason for there to be a header div at all
instead form your main navigation like this:
Code:
<span id="header">
<ul id="mainNav">
<li><a href="#" target="_self">Link</a></li>
<li><a href="#" target="_self">Link</a></li>
<li><a href="#" target="_self">Link</a></li>
</ul>
</span>
The css for this might look like so:
Code:
#header
{
display: block; /* not inherent in span */
width: 98%;
max-width: 1024px;
min-width: 960px;
margin: 0px auto;
text-align: center;
}
#mainNav
{
display: block;
margin: 0px auto;
width: 98%;
list-style-type: none;
}
#mainNav LI
{
display: block;
width: 120px;
float: left;
list-style-type: none;
text-indent: 0px;
padding: 0px;
margin: 0px;
}
As far as the body goes
a single div for the body should be sufficient.
Code:
<div id="bodyMid">
<div id="col1">
</div>
<div id="col2">
</div>
</div>
Code:
#col1
{
float: left;
margin: 3px 3px 3px 1px;
clear: none;
max-width: 300px;
display: block;
width: 50%;
border: solid 1px #000000;
}
#col2
{
float: left;
margin: 3px 1px 3px 3px;
clear: none;
max-width: 500px;
display: block;
width: 50%;
border: solid 1px #000000;
}
That should be enough to get you going.
I didn't test any of that because I'm at work, but in my head it looks good
important css properties when floating:
clear -- this value specifies whether it should attempt to be placed on it's own line. Possible values are: none, both, right, left;
none says to not clear either side (place things next to eachother if possible) and both clears both sides.
height: !!!! extremely important for floated elements
When you float an element, you are taking it out of the box model.
Box Model info
The other important model for floating is the visual reference model:
Visual Reference Model
The second one helps to explain what I mean about float but what essentially I'm saying for your design is this:
Floated elements are taken out of the box model. When this happens, the height of the container becomes smaller if it isn't specified.
but when I do that the bodymid no longer covers it.
Here is why:
Lets say you have two nested divs:
<div>
<div>
This is my inner div with content in it. The content will cause the div's height to grow based on how much content I put in it. This will also cause my container div's height to grow.
</div>
</div>
the main div's height will change with the inner div's height.
Now, if you float the inner div the main div's height will NO LONGER be affected by the inner div's content. It has been taken out of the "box model" in a sense.
to change this behavior, a height must be set manually on the parent div.
It is also important to set the height of the inner div. Let the browser interpret NOTHING!
Sorry it is a bit long winded. Hope this helps and doesn't make it more complicated for you.
If you could put the website up for everyone to see it might make it easier.
