Можно ли обойтись без float?

Question

[Super Star]

Здравствуйте. Мне нужен совет. Нужно сверстать простенький макет но при одном условии. Чтобы при удалении какого либо блока не ломалась вёрстка. Я так понимаю это нужно делать с помощью флоатов. Правильно понимаю? Я бы с радостью провернул такое с помощью flex-box, но у меня ничего не получилось.

В коде ниже если удалить сайдбар то блок с контентом останется на своём месте. Вроде бы всё так, но всё же...

Подскажите правильно ли я делаю? Вот код: https://jsfiddle.net/j5p7xaxg/1/
Можно ли это решить с помощью flex-box или как-то иначе? Просто я так считаю что флоаты устарели морально, а с помощью flex-box у меня ничего не вышло.

Иллюстрация:

Answer 1

[Илья Савельев]

Так используйте адаптивные CSS-framework, эта делается все за пару минут.

1) Twitter Bootstrap
2) Responsive Grid System
3) Skeleton

и еще куча различных штук.

Comments

[Super Star]

Я думал об этом. Я вот просто сижу и думаю чего о меня требуют. По старинке сделать или с помощью бутстрапа. Ведь не уточнили естественно!

[Илья Савельев]

Андрей Рысь: ты разработчик, делай на перспективу ;)

[Super Star]

Илья Савельев: =) эхх гулять так гулять. пойду на бутсрапе дулать

[Илья Савельев]

Андрей Рысь: если ответ помогло не забываем отметить как решение)

Answer 2

[lemme]

content растягивается, т.е занимает ширину sidebar
https://jsfiddle.net/dfct3ccj

content остается на своем месте
https://jsfiddle.net/dfct3ccj/1/

Answer 3

[Givandos]

Если свойство float справляется со своей задачей, то и используйте его.
Морально устарела несемантичная вёрстка (теги div везде, вместо более семантичных header, navigation, section, article и т.д.), но сам флоат вполне хорош.
Флекс отчасти более удобен, но работает совсем по другому. Так что не стоит считать его полной заменой флоатам.
Кстати, ещё можно использовать inline-block. Хотя и у него свои задачи.

--- update ---
Вот вам вариант без ограничений колонки с контентом. Правда сайдбар таки прийдется ограничивать.
https://jsfiddle.net/Givandos/m4w0o4de/

Answer 4

[Владимир]

В чем загадка, что могло не получиться ?
https://jsfiddle.net/j5p7xaxg/2/

Ларчик просто открывался
https://jsfiddle.net/j5p7xaxg/4/

Comments

[Super Star]

а вы удалите сайдбар и увидите

[Владимир]

Андрей Рысь: контент должен оставаться на месте а он уходит влево ?

[Super Star]

Владимир: Основные блоки сайта header, menu, slider, content (catalog), footer, feedback должны быть самостоятельными. То есть при удалении какого-либо блока верстка не должна распадаться. **Я так понимаю что не блок с контентом не должен смещаться на место блока с сайдбаром, а должен оставаться на своём месте**