CSS - two column issue

HTML & CSS
1

I’m having a CSS ‘moment’ and could really do with some help.

Within a container div I have two columns, the problem is that as soon as I put content in both, the left column automatically shunts its content to immediately below level of the right hand content.

Here’s the CSS I have:

.right_col {margin-left:220px; margin-bottom:10px; padding:10px; border:1px solid #000; background-color:#CCCC00; height:50px; }
.left_col {float: left; width: 176px; /Width of left column/ background-color:#9966FF ;margin-bottom:10px; padding:10px; border:1px solid #000;}

Appreciate any guidance people can give.
Thanks.

2

Hi RKF, welcome to SitePoint! :slight_smile:

I’m a little unclear on what you are saying here (I don’t understand “shunts”.) It sounds like you have the left column after the right column in the HTML, and that might be the problem (we’d need to see your HTML).

A better approach would be to remove the margin from the right column and give it a width and float it right. Then the HTML order won’t matter. :slight_smile:

3

You’re absolutely right. After changing to a float, it all works perfectly. I’ve been going round in circles on this for an hour and lost my way somewhat. Thanks for getting me back on the straight and narrow!