CSS Fixed position and media queries - css

Question

Im having a problem with media queries and sidebar div with a fixed position.
Basically when the viewport gets too narrow the main content moves to the left and then sits under the sidebar. I tried to set position to static with the media queries, but then it doesnt work/look the way I want.
Here is the original fiddle: http://jsfiddle.net/ym7sQ/1/
#media (max-width: 991px) {
#sidebar {
position: fixed;
}
}
Here is the one with position static: http://jsfiddle.net/ym7sQ/2/
#media (max-width: 991px) {
#sidebar {
position: static;
}
}
You can see that the sidebar is inside the content, but I want it to be overlaying the top and bottom just as it is above 991px. Below 768 its going to stack which is okay because there is not enought space for sidebar and main content. Could you help me with this please? Thanks.

Answer 1

#media (max-width: 991px)
#sidebar {
position: fixed;
}
I think you should use this.

Answer 2

check it on http://jsfiddle.net/ym7sQ/14/show
Source: http://jsfiddle.net/ym7sQ/14/
Sorry for change a lot. But the main amendment is move the whole #sidebar element out of the container.
HTML:
<div id="top">
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<h2>Home</h2>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-sm-3">
<nav role="navigation">
<ul>
<li class="active">Home</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<hr />
<p>info#domain.com
<br />123 456 789</p>
<p>Something something</p>
</div>
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<section id="main">
<div id="slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placekitten.com/1280/720" alt="Slide 1" />
</div>
<div class="item">
<img src="http://placekitten.com/1280/720g" alt="Slide 2" />
</div>
<div class="item">
<img src="http://placekitten.com/1280/720" alt="Slide 3" />
</div>
</div> <a class="left carousel-control" href="#slider" data-slide="prev">
</a>
<a class="right carousel-control" href="#slider" data-slide="next">
</a>
</div>
<div class="main-bottom">
<img src="http://placekitten.com/300/300" alt="Image" /> <a href="contact.html">
<img src="http://placekitten.com/100/100" alt="France" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</section>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<p>2013 © All rights reserved.</p>
</div>
</div>
</div>
</div>

Answer 3

The sidebar overlaps with main content is because the element .logo has fixed width(150px) and fixed left/right margin (both 40px), so the the whole width of the .logo element is 230px, which is larger than width of #sidebar element when the page is narrow enough, so #sidebar element is expanded.
Solution:
make the .logo element width dynamic, like:
.logo { width: 80%; margin: 40px auto 70px; }
Then you may have to use <img> tag to show the logo instead of using background.