Фиксированное изображение и содержимое перекрывают фиксированную боковую панель при уменьшении разрешения экрана/размера окна.

У меня есть страница со следующей структурой:

<body>
<div id="page">
    <div id="header-container">
        <header>
        </header>
    </div>

    <div id="main-container">
        <div id="main" class="site-main">
            <div id="sidebar-container">
                <div id="sidebar">
                </div>
            </div>

            <div id="content-container">
                <div id="main-banner-container">
                    <div id="main-banner-holder">
                        <img id="main-banner" src="http://dummyimage.com/900x300/000/fff" />
                    </div>
                </div>
                <div id="content" class="content" role="main">
                </div>
            </div>
        </div>
        <div id="footer-container">
            <footer>
                <div id="footer-images">
                </div>
            </footer>
        </div>
    </div>
</div>  
</body>

И отформатирован с помощью следующего CSS:

body {
    margin: 0 auto;
    width: 70%;
    background-color: rgb(0,114,187);
    font-family: verdana;
}

#header-container {
    padding-bottom: 15px;
    padding-top: 20px;
    padding-left: 35px;
    padding-right: 35px;
    height: 190px;
}

header {
    position: fixed;
    width: 66%;
    padding-top: 30px;
    top: 0px;
}

#sidebar-container {
    height:500px;
    width:320px;
    float:right;
}

#sidebar {
    position: fixed;
    color: rgb(211,34,52);
    padding: 10px;
    right: 16.5%;
    top:226px;
}

#content-container {
    width: 72%;
}

#main-banner-container {
    max-width: 900px;
}

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

Грубый пример проблемы можно увидеть здесь: http://jsfiddle.net/4WQzP/.

Какие изменения мне нужно внести?

РЕДАКТИРОВАТЬ: Чтобы уточнить, я надеялся на простое исправление на основе CSS/HTML. Javascript — это вариант, хотя я стараюсь его избегать, так как до сих пор не использовал его на этом сайте.


html css formatting
person J.B    schedule 01.08.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

для использования адаптивного дизайна использовал два способа)) первый — использовать фреймворк bootstrap, второй — писать медиазапросы

person Alex Wilson    schedule 01.08.2014
comment
Сайт представляет собой сайт Wordpress, поэтому я не думаю, что начальная загрузка действительно вариант. Я действительно искал прямое исправление CSS/HTML. Я не думаю, что относительно небольшая проблема перекрытия требует отдельного набора правил для особых случаев? Я думаю, это сработает, но наверняка есть более чистое решение? - person J.B; 01.08.2014
comment
В конце концов, я решил использовать медиа-запросы. Ну что ж! Спасибо, в любом случае! - person J.B; 02.08.2014