Question

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?

Answer 1

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');
}