CODEWITHSUNDEEP
htmlcsspadding
Logan Young
Logan Young

Reputation: 431

Padding that shouldn't be there

I have a 2 column layout that I'asked about earlier (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

Upvotes: 0

Views: 159

Answers (3)

Will Prescott
Will Prescott

Reputation: 4063

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.

Upvotes: 1

NebulaFox
NebulaFox

Reputation: 8323

Have you tried making #content float:right

Upvotes: 0

Pekka
Pekka

Reputation: 449783

"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.

Upvotes: 1

Related Questions