Заполнение левой стороны поплавка: правый элемент в дизайне полной ширины

Question

Я работаю над новым дизайном в HTML5 / CSS3, и с тех пор, как в последний раз я работал с html больше, чем над написанием контента, а не над макетом.

Я пытаюсь добиться «полной ширины», а точнее, «80% ширины», чтобы он соответствовал размеру браузера до 800 пикселей. (Мин-ширина).

Часть содержимого будет содержать блок навигации, расположенный справа (фиксированный размер, скажем, 300 пикселей), я добился этого с помощью float, хотя я научился ненавидеть float из-за проблемы «clearfix», но для отсутствие лучшего.

Слева от этого я хотел, чтобы контент занимал место справа от плавающего элемента.

Однако, если это содержимое выходит за пределы ширины, оно толкает правый всплывающий элемент вниз.

Так что-то вроде:

   -----------------------------------------------------------
          |                 Header                    |
          |                <header>                   |
          |-------------------------------------------|
   <-10%->|         <- Fill ->            |<- 300px ->|<-10%->
          |                               |           |
          |         <section>             |  <aside>  |
   -----------------------------------------------------------

Раздел (id = статьи) имеет значение:

margin: 0 0 0 30px;
display: inline-block;
float: left;

В стороне (id = боковая панель) установлено значение:

margin: 0 30px 10px 30px;
width: 290px;   

border:1px solid #6B6B6B;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;

box-shadow: 0px 0px 2px 1px #6B6B6B inset;

display: inline-block;
float: right;

Способы исправления:

• display: table и table-cell, работает, но добавляет дополнительные теги, которых я хотел бы избежать, также не уверен, что это работает везде?
• Flexbox? ну, я так и думал, но у меня есть проблемы с ним, но он все равно широко не поддерживается.
• Пусть все имеют фиксированную ширину.
• Пусть все имеют динамическую ширину. (ооо мальчик)
• Таблицы, но мы хорошо знаем, что это обсуждение.

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

Answer 1

Как насчет этого?Создайте контейнер для левой и правой частей.Обеспечьте правильное поле, чтобы освободить место для правильного контейнера.Вы могли бы плавать, но я абсолютно позиционировал это, потому что вы ненавидите плавать =).

http://jsfiddle.net/Z62f2/

div { border: 1px solid gray; width: }
#container { width: 80%; min-width: 600px; margin: 0 auto;  }
#header { height: 100px; }
#content { position: relative; }
#left { margin-right: 300px; height: 1000px; }
#right { width: 300px; height: 500px; position: absolute; top: 0px; right: 0px; }

<div id="container">
    <div id="header">Header</div>
    <div id="content">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>
</div>

Answer 2

Я бы хотел нанести удар,

Вот как я бы выделил это в HTML, который у вас уже есть. По сути, я вставил еще один div, чтобы содержать раздел и в стороне.

<div id="contentContain">
    <div id="section"></div>
    <div id="aside"></div>
</div>

и CSS ..

#contentContain {width: 80%; }
#section {float:left; width: 60%;}
#aside {float:left; width: 40%; }

Этот код должен дать вам больше перспективы, и он работает, вы можете иметь «больше» контента в стороне, и это не нарушит макет.

Удачи!