CSS three column layout issue
#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.
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
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.
Try adding float:right;
to your #right_column
Put These Lines:
//Left:
float:left;
//MAIN:
margin-left: 20em; //these will define the width
margin-right: 20em;
//Right:
float:right;
you can have a look at this page as well. There are many of examples.
精彩评论