Fixed image and content overlaps fixed sidebar as screen resolution/window size decreases

StackOverflow https://stackoverflow.com//questions/25081585

Question

I have a page with the following structure:

<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>

And formatted with the following 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;
}

Viewing the page on a widescreen shows the content fine. However, as I reduce the window size, or if I view the site on a lower resolution screen, the fixed image and the text underneath it starts to obscure the sidebar, even though it does scale a little. Furthermore, when the page is scrolling, even though some of the text move to make space for the sidebar, the text below it overlaps when scrolled.

A rough example of the problem can be seen here: http://jsfiddle.net/4WQzP/

What changes do I need to make?

EDIT: To clarify, I was hoping a plain CSS/HTML based fix. Javascript is an option, though I'm trying to avoid it since I haven't really used it in this site so far.

Was it helpful?

Solution

for using an adaptive design used two ways)), the first is to use the bootstrap framework, the second is writing media queries

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top