CSS problem

[raspsgirl]

Hi,

I just built this page in CSS and I'm having a gap in the left side water piece. Could someone help me find out why there's a gap?

Here's the website:

< sorry, no personal links >

and here's the CSS:

body,
html {
font-family: Arial;
font-size : 10pt;
margin:0;
padding:0;
background:#FFFFFF;
color:#000;
}
body {
min-width:1024px;
}
#wrap {
background:#FFF;
margin:0 auto;
width:1024px;
}
#main {
background:#FFF;
float:right;
width:842px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
float:left;
width:182px;
}
#footer {
background:#fff;
clear:both;
}
#footer p {
padding:5px;
margin:0;
}

[edited by: tedster at 4:06 am (utc) on May 7, 2008]

[D_Blackwell]

Welcome to WebmasterWorld. No personal links allowed, so you can expect it go poof:))

Often, trouble shooting can go pretty quickly by wrapping the problem <div>s with borders and seeing if those <div>s and/or their content actually occupy the space that you think or expect.

Try adding {border: 2px solid red;} to #main and #sidebar.

---------------

body {font-size: 10pt;} ?

Be sure that you want to lock your document(s) into this. IMO, better to set the body at 100%, and then specify variances in specific ids or classes. You'll have more flexibility later.

[Marshall]

raspsgirl, welcome to WebmasterWorld.

I assume you are talking about these two <div>:

#main {
background:#FFF;
float:right;
width:842px;
}
and
#sidebar {
float:left;
width:182px;
}

I suspect the problem is the fact #main floats right and #sidebar left. You would probably be better off having [b]both[/i] <div>'s float left. That being said, and without seeing your HTML, the "main <div> would then come after the #sidebar <div>.

Often, trouble shooting can go pretty quickly by wrapping the problem <div>s with borders and seeing if those <div>s and/or their content actually occupy the space that you think or expect.

You also may be better off changing the background color rather than adding borders since borders will make your <div>'s wider and thus affect the float. This could then cause the one <div> to wrap around (below) the other. Just a personal opinion/preference.

Marshall