CODEWITHSUNDEEP
jquerycsspositioningfixed
Jarek
Jarek

Reputation: 13

Two fixed divs - right and left

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

Answers (2)

Zuul
Zuul

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

Vin Burgh
Vin Burgh

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

Related Questions