Hey everyone i am trying to create a 3 column layout with a main section of 550 and the left and right both 275px in width. The page stretches across 1100. However it does not seem to be working and appears all messed up, am sure its something simple but not sure what, the main section seems to have some black line around it too. The web address is http://www.cherrietestingwebsite.com/ Any help appreciated a lot, thanks.

Add "float: left;" to #mainsection and then rearrange your markup so that same div is between #leftsection and #rightsection.

 

With that out of the way, you should have your 3 column layout, but they should overflow their container vertically. There are several ways to fix this. The easiest way would be to simply add "overflow: auto;" to #contentholder.

 

The above works on my browsers

Edited October 9, 201213 yr by Pete Prosper

Yes, Agree with Pete Prosper. You need to add float property & Arrange Markup.

 

1. Left(leftsection)Div

2. Middle(mainsection)Div

3. Right(rightsection)Div

 

All Div should be Float Left.

Yes, Agree with Pete Prosper. You need to add float property & Arrange Markup.

 

1. Left(leftsection)Div

2. Middle(mainsection)Div

3. Right(rightsection)Div

 

All Div should be Float Left.

also you may need to wrap all 3 divisions and set an height for some older versions of IE else the right column may be lower than the other 2

 

this may be helpful

 

http://www.dynamicdrive.com/style/layouts/category/C10/

 

http://www.dynamicdrive.com/style/layouts/category/C10/

 

You know you don;t have to put links between code tags yeah?

yeah just thought it looked better?

It makes the links unclickable though.

Hey guys yeah that worked a treat, thanks for the help I would have had no idea to change all the floats on the divs to left, that's great I appreciate that a lot.