2

Есть два блока <main> и <aside> html:

<aside></aside>
<main></main>

css на десктопах:

aside {
    float: right;
    width: 300px;
}

На десктопах все так как на картинке, и меня это полностью устраивает.

введите сюда описание изображения

На мобильниках css выглядит так

aside {
    width: 100%;
}

main {
    width: 100%;
}

введите сюда описание изображения

Мне же нужно что бы блок <aside> на мобилках располагался под <main>.

В идеале решить эту проблему нужно без flexbox.

2
  • А можно поинтересовать, чем flexbox не угодил? Вроде поддержка есть во всех современных браузерах
    – andreymal
    15 дек 2018 в 22:04
  • @andreymal, Разметка остального проекта совместима с ie8, и хотя поддержка как бы уже не приоритетна, ломать все одной маленькой фишечкой очень не хочется. 15 дек 2018 в 22:06

1 ответ 1

3

Например: поменять местами в html сайдбар и контент + calc для main:

* {
  box-sizing:border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}


main {
  background: #0084ff;
  height: 300px;
  float:left;
  width:calc(100% - 300px);
}

aside {
  background: #00ffa8;
  height: 300px;
  float: right;
  width: 300px;
}

@media (max-width: 500px) {
  aside,
  main{
    width: 100%;
    float:none;
  }
}
<main>main</main>
<aside>aside</aside>

Вариант с display:table:

* {
  box-sizing:border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}


main {
  background: #0084ff;
  height: 300px;
  display: table-cell;
}

aside {
  background: #00ffa8;
  height: 300px;
  width: 300px;
  
  display: table-cell;
}

.wrap {
  display: table;
  table-layout:fixed;
  width: 100%;
}

@media (max-width: 500px) {
  
  .wrap,
  aside,
  main{
    width: 100%;
    display: block;
  }
}
<div class="wrap">
  <main>main</main>
  <aside>aside</aside>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.