Aligning two columns in CSS

datett

Hi all,

I have problem which I need someone's views on. I am finishing up a landing page for a website. The problem is that I have two columns which need to be adjacent one with the other. However, when I preview the webpage in IE or Firefox, column A is sitting at the top and column B is underneath Column A.
Any advice would be more than appreciated.

Code below for information:

body { color:red; margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background: #70000;}
h1 { color: red; font-family: Arial, Helvetica, sans-serif; margin: 10; font-size: 24px; font-weight: bold;}

#main { width: 928px;}
#header { }
#headtopbar { float:left; background: url(http://example.png); width: 434px; height: 63px; }

#content { float: left; background-color: #ffffff; width: 610px;}
#search { float: right; margin-left: 40px; margin-top: 270px; font-weight: bold; color: #9f0000;}

.widthgr { width: 100px; }
#left_column { float: left; background: url(http://example.jpg) no-repeat; width:450; height: 515px;}
#right_column { background:#ffffff; no-repeat; float: right;width: 317px; height: 472px; text-align:right;}

#column_left_far { float: left; margin-top: 55px; float: right; }
#right_column label { float: left; text-align:left; vertical-align:top; font-weight: bold;}
#loginbut { float: right; margin-top: 20px}


#right_column form { padding: 16px; float: right; background: #ffffff; float: left; width: 307px; height: 514px;}
#column_right_far { float: left; margin-top: 40px }
#shadow { float: left; background: red; width: 928px; height: 33px; }
#reflection { float: left; background: red no-repeat; width: 928px; height: 75px; }
#footer { clear: left; padding: 8px; color: red; line-height: 18px; width: 528px;}

.redcolor { color: red; }
.copyright { color: black; line-height: 32px; }
.darker_text { color: black; line-height: 20px; padding-top: 55px; padding-left: 10px; padding-right: 10px;}


#_badge_wrapper { width: 621px; margin-top: 24px; padding-left: 20px; overflow: hidden;}
#_badge_inner { padding: 10px 0 10px 10px; }
._badge_item { float: left; margin: 0 28px 0 0; padding: 0; font-weight: bold;}
._badge_item img { border: 1px solid black; }
._badge_item_detail { margin-top: 3px; font-size: 10px; width: 90px; overflow: hidden; }
._badge_clear { clear: both; }
._badge_item_region { color: #9f0000; font-weight: normal; }


/* CSS TRANSPARENCY, THIS INVALIDATES THE STYLESHEET, USE AT YOUR DISCRETION */
/*a:hover img{ opacity: 0.8; filter: alpha(opacity=80); -moz-opacity:0.8; }*/

/* input[type=""] DOES NOT WORK IN IE6 */
input[type="checkbox"], input[type="radio"]{ border: none; width: auto; background: none; }

#search select{

margin: 0;
}
#search label{

vertical-align:middle;
}
/* IE6 Only */
#rightcolumn{
margin-left: 20px;
}
.main_input {
background: white no-repeat;
width: 155px;
height: 17px;
font-size:12px;
border: solid;
color: black;
padding: 6px 0px 0px 6px;
margin-bottom: 6px;
}

.formnote { color:black; font-style: italic; font-size:9px; line-height: 11px; margin-top: 4px; margin-bottom: 4px;}
.gcl { width: 155px; margin-bottom: 2px;}
.day { width: 50px; }
.month { width: 63px; }
.year { width: 54px; }

Liam Byrne

Make sure the widths and margins all fit within the container, and if using IE6 add "display:inline" to any floated divs to avoid the double-margin bug in that browser.

sineadw

hard to tell without the html..

sounds like you're going over the width of your container alright though. Don't forget all margins and paddings are added to the div widths.I usually find I have to go a pixel or two inside the absolute width of a div when nesting..

datett

Thanks guys,your help was precious. I just figured out how to work it out.
D

sineadw

nearly

Another approach is to use nested divs for each column.

Each outside div would only take care of width. With no padding, no borders and no margin. Then each inside div has padding, borders and margin. This is a kind of work-around. Adds a little bulk to the page but works v well.

Sounds like you found a solution however.