Как правильно расположить их, используя float в HTML?

Question

Я пытаюсь сделать три вида блоков, используя этот код CSS:

div#menu {
width:200px;
height:400px;
border:2px ridge white;
text-align:center;
float:left;
margin:4px;
}
div#container {
width:850px;
height:850px;
overflow:auto;
margin:auto;
text-align:center;
border:2px ridge green;
}
div#maincontent {
width:608px;
height:700px;
border:2px ridge white;
text-align:center;
float:right;
top:10px;
margin:4px;
}
div#subcontent {
width:200px;
height:100px;
border:2px ridge white;
text-align:center;
float:left;
margin:4px;
clear:both;
}

Контейнер будет содержать весь проект / страницу.

Внутри контейнера меню будет находиться в верхнем левом углу, а поле подконтента будет прямо под меню (нижний левый угол). Поле основного контента будет находиться в верхнем правом углу, справа от поля меню / субконтента.

Я устроил это примерно так в HTML:

<div id="container">
<div id="menu"></div>
<div id="subcontent"></div>
<div id="maincontent"></div>
</div>

Однако, когда я запускаю это, верхняя часть окна основного контента выравнивается по верху верхней части окна содержимого, а не по меню.

Как бы я сделал так, чтобы оно всплывало справа вверху, а не справа?

Answer 1

попробуйте это, если вы хотите плавать вправо для блока, всегда размещайте его перед левыми блоками плавания

так что если вы хотите плавать

<div id="maincontent"></div> 

направо, передайте это первым, прежде чем всплыть влево divs

следующий порядок div'ов должен работать

<div id="container">
<div id="maincontent"></div>
<div id="menu"></div>
<div id="subcontent"></div>
</div>

Answer 2

http://jsfiddle.net/7zvSu/

Сделайте ваш mainContent float:left (удалите свойство top). И поместите ваш основной контент div сразу после меню.

CSS:

div#menu {
    width:200px;
    height:400px;
    border:2px ridge white;
    text-align:center;
    float:left;
    margin:4px;
}
div#container {
    width:850px;
    height:850px;
    overflow:auto;
    margin:auto;
    text-align:center;
    border:2px ridge green;
}
div#maincontent {
    width:608px;
    height:700px;
    border:2px ridge white;
    text-align:center;
    float:left;
    margin:4px;
}
div#subcontent {
    width:200px;
    height:100px;
    border:2px ridge white;
    text-align:center;
    float:left;
    margin:4px;
    clear:both;
}

HTML

<div id="container">
  <div id="menu"></div>
  <div id="maincontent"></div>
  <div id="subcontent"></div>
</div>