CSS three column layout issue

Question

#left_column {
   float: left;
   border: 1px solid #ccc;
   padding: 5px;
  width: 20em;
}

#main_content {

  margin-left:  25em;
   border: 1px solid #ccc;
  padding: 5px;
  width: 30em;
}

#right_column {
 margin-left: 60em;
 width: 7em;
    border: 1px solid #ccc;
   padding: 5px;
}

I am trying to get three vertical columns on my page here. The horizontal positioning is the way I want it to be, but I am having some trouble with the vertical alignment. For some reason the right_column is getting pushed below the main_content column. I would like to have all columns start at the top of the page.

Answer 1

The reason #right_column is appearing below #left_column and #main_content is because you are not floating the #main_content or the #right_column.

#main_content and #right_column are still part of the normal flow of the html document. This mean they will appear below one another.

If you want all 3 areas to be next to each other you can float the #main_content and #right_column left and reduce/remove the margin-left

Answer 2

Float right column to right. If you don't specify floating, it will be pushed down.

#right_column {
 margin-left: 60em;
 width: 7em;
 border: 1px solid #ccc;
 padding: 5px;
 float:right;
}

Also, try decreasing the width of the main content area to see if right column jumps back beside it.

Answer 3

Try adding float:right; to your #right_column

Answer 4

Put These Lines:

//Left:
float:left;

//MAIN:
margin-left: 20em; //these will define the width
margin-right: 20em;

//Right:
float:right;

Answer 5

you can have a look at this page as well. There are many of examples.