Jump to content
  • 0

Проблема с позиционированием 2х блоков


zevilz
 Share

Question

Сначала был примерно вот такой код:

<div class="content">    <div class="content_div"></div>    <div class="sidebar">        <p></p>        <p></p>    </div></div>

с таким css:

.content_div {    margin-left: 220px;}.sidebar {    float: left;    width: 200px;}

Все отображается нормально. Но тут для адаптивности шаблона под мобильники (на мобильниках планируется вывод сайдбара под контентом) потребовалось поменять местами content_div и sidebar. При этом sidebar съехал вниз под content_div. Поместил контент сайдбара в дополнительный блок и установил position: absolute:

<div class="content">    <div class="sidebar">        <div class="sidebar_wrap">            <p></p>            <p></p>        </div>    </div>    <div class="content_div"></div></div>
.content {position: relative;}.content_div {    margin-left: 220px;}.sidebar {    float: left;    width: 200px;    position: absolute;    top: 0;    left: 0;}

Опять все в норме, за исключением того, что сайдбар может уйти за пределы экрана при маленькой высоте контента, т.к. position: absolute. Можно добавить min-height к контенту со значением больше максимальной высоты сайдбара, но контент сайдбара динамический и часто изменяется. Могут появиться лишние пустые пространства, а если добавить много контента, то придется снова править css, чтобы сайдбар не уехал за пределы экрана.

 

Как можно решить эту проблему без использования js, чисто через css? Или может есть какие другие способы разместить сайдбар под контентом так, чтобы осталась предыдущая верстка?

 

Заранее спасибо за ответы.

 
Edited by zevilz
Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
Но тут для адаптивности шаблона под мобильники (на мобильниках планируется вывод сайдбара под контентом) потребовалось поменять местами content_div и sidebar
 

 

Что мешает отключить float и margin при определённой ширине экрана?

Link to comment
Share on other sites

  • 0

Что мешает отключить float и margin при определённой ширине экрана?

 

 

Я так и собираюсь сделать, но если отключить float и margin с предыдущей версткой, то сайдбар будет выше контента, а мне нужно наоборот.

 
Link to comment
Share on other sites

  • 0

не пойму причин таких телодвижений

(на мобильниках планируется вывод сайдбара под контентом) потребовалось поменять местами content_div и sidebar

контент
сайдбар

 

когда нужно используете float и margin

Link to comment
Share on other sites

  • 0

не пойму причин таких телодвижений

(на мобильниках планируется вывод сайдбара под контентом) потребовалось поменять местами content_div и sidebar

контент

сайдбар

 

когда нужно используете float и margin

 

Я ж написал, в первом сообщении, в чем проблема, если сайдбар сделать ниже контента. Контент статичный с марджином слева, сайдбар плавающий слева. В этом случае сайдбар будет слева, но под контентом, т.е. слева от контента будет пусто. Поэтому и делаю сайдбару абсолютное позиционирование.

Edited by zevilz
Link to comment
Share on other sites

  • 0

а @media не спасает разве?

убрать margin у контента например при маленьком размере окна браузера

Про @media я и сам знаю, у меня проблема с позиционированием садбара слева от контента, если сайдбар в коде расположен ниже контента. На мобильниках контент и так будет без марджина, а под ним сайдбар без float.

Link to comment
Share on other sites

  • 0

так не пробовали?

http://jsfiddle.net/88bh68v3/

ну так тогда же контент сплющит и большом количестве содержимого сайдбар опять упадет ниже.

 

как вариант http://jsfiddle.net/q1bxcb9u/1/

1. Что значит сплющит контент?

2. А ограничить размер контента ни как?

3. сайдбар у вас что-то на маленьких разрешениях не падает вниз

Link to comment
Share on other sites

  • 0

так не пробовали?

http://jsfiddle.net/88bh68v3/

та же проблема - http://jsfiddle.net/88bh68v3/3/

 

ну так тогда же контент сплющит и большом количестве содержимого сайдбар опять упадет ниже.

 

как вариант http://jsfiddle.net/q1bxcb9u/1/

 

 

А так работает - http://jsfiddle.net/88bh68v3/4/То, что нужно. Спасибо. А как насчет кроссбраузерности и валидности минусового марджина в 100%?

 
Edited by zevilz
Link to comment
Share on other sites

  • 0

Появилась еще одна проблема. Если контента мало, то блок контента сужается и смещается вправо - http://jsfiddle.net/88bh68v3/7/. Если сделать ширину контента 100%, то блок контента залезает на сайдбар, а при float: left меняется с сайдбаром местами.

 
Edited by zevilz
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy