Padding that shouldn't be there

Question

Hi!

I have a 2 column layout that I'asked about earlier (http://stackoverflow.com/questions/3423761/simple-2-column-layout). What I've noticed is that it's not the positioning of the content column on the right that's the problem, but rather it's the way the content in that column is positioned.

I've been looking for a while and I can't see where the problem is. It looks as though the content in the right column has padding on it equal to the height of the left column.

Here's my css:

#wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; }
/* Main page content, puts actual content and sidebar side-by-side */
#sidebar { float: left; padding: 5px; width: 189px; border-right: 1px solid #b6bcc6; }
#content { padding: 0 !important; margin: 0 0 0 200px; width: 790px; background-color: #ff00ff; }

EDIT: To see what's actually going on, you can check out http://www.logansarchive.za.net/bad.jpg and http://www.logansarchive.za.net/firebug.jpg I'm also going to add the page and style related files (stylesheet and images) as I have it so that you can inspect at your leisure: http://www.logansarchive.za.net/Default.aspx

Answer 1

"Use Firebug" is generally not regarded a valid answer on SO, but it really is the best way to identify mystery paddings. Install it in your Firefox, right-click the element, and Firebug's Layout view will show you where it comes from.

Answer 2

Have you tried making #content float:right

Answer 3

Inside your <div id="content"> you have a table with clear: both in its CSS, and then 2 divs with clear: left and clear: right on them respectively, which are breaking your floats. Removing all those clear properties in Firebug fixed it for me on your test page.