hey,

 

Having a problem with positioning in a three colums layout - the right hand column will not align at the top beside the other columns here: My link. Its happening on all of the pages. There should be enough room for the right hand <div>. each side col is 200px wide, the middle column is 415 px with the margins at 14px and the total width for the content at 843px.

 

I had this problem yesterday, and fixed it but then realised the content area was not aligning with the banner above, so now I've knocked it out again somehow.

 

This is my CSS for that section:

 

.full-width-content #content {margin:0 auto;width:900px;} 

#leftsidebar  {
background-color:#f3f3f3;
width:200px;
float:left;
margin-left:63px;
margin-right:14px;
min-height:600px;
}


ul.bullet li {
 padding: 0px 0 2px 13px;
 list-style-image: url('http://www.fmwhelan.com/test/wp-content/themes/metric/images/bullet2.png'); 
 }

.CustomHeadline  {
width:415px;
color:#005134;
font-size: 20px;
border-bottom: 3px solid #005134;
padding: 0 0 5px 0;
}

.CustomHeadlineFullwidth  {
width:843px;
color:#005134;
font-size: 20px;
margin-left:60px;
margin-bottom:30px;
border-bottom: 3px solid #005134;
padding: 0 0 5px 0;
}

.CustomHeadline2  {
width:656px;
color:#005134;
font-size: 20px;
margin-left:60px;
margin:0 0 15px 260px;
border-bottom: 3px solid #005134;
padding: 0 0 5px 0;
}

.sideheadline  {
width:200px;
color:#005134;
font-size: 12px;
font-weight:bold;
border-bottom: 3px solid #005134;
padding: 0 0 5px 0;
}

.sidenavheadline  {
width:200px;
background-color: #ffffff;
color:#9EC54D;
font-size: 12px;
font-weight:bold;
border-bottom: 3px solid #9EC54D;
padding: 20px 0 5px 0;
margin-bottom: 15px;
}

.CustomContent  {
width:415px;
float:left;
}

.CustomContent2  {
width:628px;
float:left;
}

.rightsidebar  {
float:right;
align:top;
width:200px;
margin:0 0 0 14px;
padding:0;
}
/***/

 

cheers for any help

Your width is 900px your columns add up to 906px

 

Increase .full-width-content #content to 906px or lose 6px in your columns

Your width is 900px your columns add up to 906px

 

Increase .full-width-content #content to 906px or lose 6px in your columns

 

thanks for that mteam, again! Dont understand fully though - I thought my columns added up to 843px? like the width of the banner image? I know this is v simple stuff but I'm a bit confused bout that

Dont forget to count margins

 

col 1 leftsidebar 63px+14px margins + 200px width (total=277px)

col 2 customcontent 415px (total=415px)

col 3 rightsidebar 14px margin + 200px width (total=214px)

 

906px in total

 

hth

hey mteam, I was forgetting the margins, thanks for that, understand now

hey mteam, I was forgetting the margins, thanks for that, understand now

Haha, I remember being stumped on margins myself. Don't forget about padding too .

I remember finally grasping the box model was one of my first website related "eureka" moments lol.