Я пытаюсь это сделать:
Но у меня возникают проблемы с тем, чтобы оба средних дивизиона играли хорошо. Если я установил их как относительное число (30% и 70%), он "работает", но левый div изменяет размер, поскольку пользователь меняет ширину окна браузера.
#floatitleft{width:30%; float:left;}
#floatitright{width:70%; float:left;}
Я хочу, как показано на рисунке
#floatitleft{width:300px; float:left;}
#floatitright{width:100%; float:left;}
Но это приводит к тому, что "floatitright" окажется ниже floatitleft. И если я установил его на 70%, он заканчивается справа от "floatitleft", но по мере того, как я меняю размер браузера, он снова оказывается под ним снова. Что делать?
UPDATE: В конце концов я закончил с:
#topper{
height:100px;
width:100%;
background-color:blue;
}
#wrapperz{
height:inherit;
width:100%;
}
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;}
#wrapperz #floatitleft{
width:300px;
float:left;
}
#wrapperz #floatitright{
margin-left: 300px;
min-width:300px;
}
#bottommer{
height:100px;
width:100%;
background-color:red;
}
который будет использоваться как:
<div id="topper">
test
</div>
<div id="wrapperz">
<div id="floatitleft">
<p> Stuff </p>
</div>
<div id="floatitright">
<p> Stuff </p>
</div>
<div style="clear: both;"/>
</div> <!-- Close Wrapper -->
<div id="bottommer">
test
</div>
Обратите внимание, что это не правильный HTML, но он просто служит решением для моего примера. Кроме того, "div style =" clear: both "особенно важен, если вы попробуете это, потому что не используете этот кубас, чтобы нижний колонтитул испортился, поскольку обертка не растягивается вертикально. Но Марк предоставил то, что я считаю лучшим /cleaner ниже.
