У меня есть очень простая структура:
<div id="header">
<h1>Title</h1>
</div>
<div id="content">
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>...</li>
</ul>
<div id="stuff">
<p>Other stuff in the content</p>
</div>
</div>
<div id="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>...</li>
</ul>
</div>
И я хотел, чтобы такое поведение было только с одной таблицей стилей: когда разрешение браузера велико, я хочу отобразить меню # справа от#content.Когда это не так, он может пойти ниже.Итак, я попробовал это:
#content
{
float:left;
width:70%;
}
#menu
{
width:300px;
float:left;
}
, и это вполне работает, но на iPhone #content слишком велико, и слева остается много пустого пространства.Мне бы очень хотелось, чтобы экран максимально соответствовал #content (#stuff не очень большой).
Кто-нибудь из вас, ниндзя CSS, знает, как это сделать?
Большое спасибо.
Жюльен