I'm fairly new to CSS and I am doing a site redesign for the company I work
for. Here is the link to the page I'm working on, you should be able to see the
issue I'm having: http://www.colonybeachresort.com/red...test_page.html

I'm trying to get the main content area and the side bar area (the dark blue
and the light yellow boxes with placeholder text) to have some sort of padding
around the edges so the type doesn't flow all the way to the top, sides, and
bottom. Every time I add margin or padding to these areas it makes the right
float (yellow box) go below the main content (blue box). I don't know what I'm
doing wrong, so any is very appreciated!!! I've also attached the CSS
code, I hope it s! It is the #body-main and #sub-nav we're paying attention
to.

The blocks of color are only for guides at this time (that is why it looks so
ugly) I don't want to put the graphics in until I have the CSS set up just
right.

html, body {
margin: 0;
padding: 0;
}
html {
overflow-x: hidden;
overflow-y: scroll;
}
#page-container {
width: 900px;
margin: auto;
}
#top-nav {
height: 25px;
background-color:#FF99FF;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #3399CC;
letter-spacing: 1px;
}
#logo-container {
height: 100px;
background-color:#CCCCFF;
}
#main-nav {
height: 75px;
background-color:#99CCCC;
}
#flash-container {
height: 300px;
background-color:#CCCC99;
}
#booking-mask {
clear: both;
height: 50px;
background-color:#33CCFF;
}
#body-main {
float: left;
width: 600px;
background-color:#333399;
font-family: Geneva, Arial, Helvetica, sans-serif;
line-height: 22px;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 1px;
clear: both;
}
#sub-nav {
float: right;
width: 300px;
background-color:#FFFF99;
clear: none;
}
#footer {
clear:both;
height: 100px;
background-color:#993399;
}

I'm pretty new to CSS too, and I'm not sure this is going to , but I think
I had a similar problem, only mine was with an image floated to the left with a
left margin. After doing a browser compatibility check, I found this out.....

"Line 112, Double Float Margin Bug 'error'
When a margin is applied to a floated box on the same side as the direction of
the float, the margin is doubled. This bug only affects the first float in a
row of one or more floats.
Affects: Internet Explorer 6.0 Likelihood: Very Likely"
This was the solution: Specify display: inline; for the affected float.

this was the code of my image before I changed it:

.image {
background-color: #121922;
height: 100px;
width: 100px;
float: left;
margin: 20px;

Someone told me to just add "display:inline" to the styling like this: (and it
worked)

.image {
background-color: #121922;
height: 100px;
width: 100px;
float: left;
margin: 20px;
display: inline;
}

Hope this s!