Как исправить чтоб aside всегда был в левой колонке

На рисунке: aside должен быть слева вне зависимости от заполнения content. А получается что при малом заполнении content aside смещается на позицию "aside2"

разметка и стили:

Код:

<div id=container> <nav></nav> <content></content> <aside></aside> </div>

Код:

#container {width: 300px;}
nav {float: left; width: 100px; }
content {float: right; width: 200px; }
aside {float: left; width: 100px; }

Как исправить чтоб aside всегда был в левой колонке?

ps:
clear:both не подходит, т.к. aside уезжает вниз с увеличением наполнения content:

 

nav и aside в один блок

 

<div id=container> - так же без кавычек разметка?

 

Я не экстрасенс, это что и куда?

Так чтоб ближе к делу (разметка):
http://codepen.io/Kireon/pen/RKgbrv
- height для content может быть от 50 до 1000px (т.е. поле будет иметь разные значения на разных страницах)
- height для nav может быть от 200 до 1000px (т.е. поле будет иметь разные значения на разных страницах)
- height для aside допустим незименное 220px

Как я понимаю для реализации - content должен быть гарантировано выше nav. В nav будет аккордион, т.е. высота не постоянная и не заданная. Как вариант, подойдут любые средства для определения текущей высоты nav.

Или как-то можно aside прижать влево?

 

http://codepen.io/anon/pen/dNRbgE не проще вот так сделать?

 

Нужен aside, располагающийся после content.
Подойдет если aside будет в left-sidebar (как пишите Вы), только при определенном @media он все равно должен уходить под content. Так возможно?

 

Добавьте в стили например

Код:

@media (min-width:768px){
.container {
float:none;
}
.left-sidebar {
float:none;
}
}

 

https://jsfiddle.net/newjnb72/

 

Вы видимо не поняли задачи.
Есть верстка с последовательностью nav -> conteiner -> aside. При такой верстке aside уезжает под content при определенных @media {max-width:210px}. Это правильно, мне это и нужно.
Проблема в следующем: на большом экране aside скачет куда попало, а нужно чтоб он был прижат к левому краю.

Не подходит. При @media {max-width:210px} должна быть последовательность сверху-вниз: nav -> conteiner -> aside
К примеру в Вашей ссылке для #container сделайте width:200px. container уйдет в самый низ, а нужно чтоб он располагался между nav и aside.

 

Это означает, то ccs правила будут работать, если разрешение экрана меньше, 210пикс. Таких экранов уже давно нет.

 

Да блин не придерайтесь к мелочам. То к кавычкам, то к значениям. Как Вы раньше content с шириной 200px не заметили )))
Все правильно написано. Данное значение было выбрано для наглядности кода, который приведен выше. Суть от этого не меняется.

Вопрос все еще в силе.

http://codepen.io/Kireon/pen/RKgbrv - обновил, добавив @media и немного изменил значения для наглядности (видно при уменьшении ширины браузера).
aside по прежнему находится фиг знает где при малом заполнении content, а должен быть слева на разрешении больше @media

 

content {
min-height: высота nav

}

 

Не подходит.
Высота nav не задана и не постоянная. Внутри nav - меню аккордион. Если бы высота была постоянная - можно было бы через js.

--- Добавлено, 23 янв 2017 ---

http://codepen.io/Kireon/pen/bgRwZP - Все работает как надо. Только при переносе в реальный код - aside начинает сьезжать вниз, когда увеличивается содержимое content.
В чем ошибка?
Какие-то нюансы кода или неправильно переношу?

 

https://jsfiddle.net/newjnb72/1/

 

aside находясь внутри wrap не уйдет (не уходит) под content при уменьшении ширины.

--- Добавлено, 23 янв 2017 ---

Спасибо, переменные table-footer-group и table-row-group помогли. При этом расположил все div друг за другом nav - aside - content.

ps: Надеюсь они кроссбраузерные и работают на всех устройствах.

 

Если в Вашем примере в hrml оставить следующее (убрать слова внутри тегов):

Код:

<div id="container">
    <div class="wrap">   
      <nav>NAV-NAV</nav>   
      <aside>ASIDE</aside>
    </div><content>CONT</content>
</div>

Тогда как для aside и content задать ширину в 100% при уменьшении ширины экрана? Желательно не трогая div container

 

Я бы Вам посоветовал изучение фреймворка bootstrap и современную адаптивную верстку.

 

bootstrap это всего лишь набор css и js, ничего нового.
Так вот эти самые ситили хотелось бы прописать вручную.

 

Все оказалось очень просто.
В самой первой верстке

Код:

<div id="container"> <nav></nav> <content></content> <aside></aside> </div>

к aside нужно было добавить clear left.

Тем самым если nav выше чем content, то aside все равно остается в левой части (не прыгая под content).

Надеюсь это работать будет и работает правильно, а не случайно он остается на своем месте )