Проблема с тремя колонками в CSS

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;
}

Я пытаюсь получить три вертикальных столбца на моей странице здесь. Горизонтальное расположение - это то, что я хочу, но у меня есть некоторые проблемы с вертикальным выравниванием. По какой-то причине right_column помещается ниже столбца main_content. Я хотел бы, чтобы все столбцы начинались в верхней части страницы.

Answer 1

Причина, по которой #right_column появляется ниже #left_column и #main_content, заключается в том, что вы не используете #main_content или # right_column.

# main_content и #right_column все еще являются частью обычного потока HTML-документа. Это означает, что они появятся ниже друг друга.

Если вы хотите, чтобы все 3 области находились рядом друг с другом, вы можете переместить #main_content и #right_column влево и уменьшить / удалить поле слева

Answer 2

Вы также можете посмотреть на эту страницу . Примеров много.

Answer 3

Попробуйте добавить float:right; к # right_column

Answer 4

Поместите эти строки:

//Left:
float:left;

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

//Right:
float:right;

Answer 5

Плавающая правая колонка вправо. Если вы не укажете плавающее значение, оно будет сдвинуто вниз.

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

Кроме того, попробуйте уменьшить ширину основной области содержимого, чтобы увидеть, не отступает ли правая колонка рядом с ней.