I would like to create two fixed divs on my webpage. First should be on the left, second on the right. I create some code but It doesn't work perfect.
Demo here
I have no idea how to correct it. Any solutions?
When the page scrolls, you're setting a position:fixed
to your #aside
and #bside
elements, by applying a class fixed
and fixed2
.
Since the position:fixed
when aplied to #aside
and #bside
, takes them out of the document flow, the element #main
is floating as expected to the left.
To avoid changing your current code, a simple solution would be to use a class to set certain styles to your #main
element, and have that class applied as needed:
See this working Fiddle Example.
CSS
.fixMiddle {
position: relative;
left: 190px; /* your #aside width+padding+border */
}
jQuery
if ($('#aside').hasClass('fixed')) {
$('#main').addClass('fixMiddle');
} else {
$('#main').removeClass('fixMiddle');
}