CSS columns without control over each column individually?

[sodani]

Here's my problem. Usually when I create columns, I'll give them separate classes (i.e. left and right) and then float the left column to the left.

However, I'm using a CMS and in this case, it is spitting out block level elements using a template so I can't name each block individually. Does anyone know how I can get these to appear side by side rather than one of top of the next?

[DrDoc]

Just float it left ... They'll line up just fine.

[sodani]

I've tried that, and it looks good in FF, but in IE, they're stacking on top of each other. I'm not setting any widths. Does anyone know why this might be happening?

[sodani]

Nevermind. I was stumped for a minute, but then I realized that IE was adding a margin to the ul block and there wasn't enough space for 2 columns.

[sodani]

Okay, I need help with this one, though. After my 2 columns, the 20px top margin on my footer block is appearing in IE, but not in FF. Does anyone know what could be going on here?

Thanks!

[icantthinkofone]

How are you positioning the footer?

[sodani]

I'm not using any positioning on it. It does have a clear:both line though, but I don't think that would prevent the top margin from working.

[icantthinkofone]

Then what about the div above it? You may have to post the code.

[sodani]

Okay, here's the css for the div above the footer, and for the footer.

#maincontent {
width: 462px;
margin-left: 180px;
margin-right: 200px;
background-color: yellow;
}

#maincontent p {
padding-bottom: 10px;
}

#footer {
margin-top: 20px;
clear: both;
background-color:#575352;
padding: 0px 5px 0px 5px;
}

[SuzyUK]

what happens if you add 1px top/bottom padding to you #maincontent div?

#maincontent {1px 0;}

When you use clear: both; on a "footer" in IE it clears enough to clear the columns but it also clears the last <p> bottom margin in these columns (actually it would apply to any element that had a bottom margin on it - collapsing margins - but anyway), using padding, or a border, on the content div should be enough to contain the margins inside the content element - as it should stop the margins collapsing outside the element, so letting the clear:both; of the footer work on the divs boundaries.

It may be that a wrapper would help clarify this situation but let us know what happens in this first instance

Suzy

[sodani]

That didn't do anything. However, I found that if I add a paragraph below the ul block, the 20px margin appeared.