Reputation: 13
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?
Upvotes: 1
Views: 333
Reputation: 16269
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');
}
Upvotes: 0
Reputation: 1419
By providing a margin
to #main that is equal to the width of the fixed columns, it'll keep that area from snapping back towards the left. When you apply position:fixed
to the columns, it is taking those elements out of the flow of the document.
Since position:fixed
is applied to the columns dynamically (through the use of JS), you may also consider applying the margin
to #main dynamically as well, if for timing purposes only.
Upvotes: 2