CODEWITHSUNDEEP
csstwitter-bootstrapcss-positiontwitter-bootstrap-3
James Barrett
James Barrett

Reputation: 11

Bootstrap 3, Three-column fixed layout breaks in Chrome

I have tried everything within my repetoire to fix this. I fall on my knees with open hands!

You can view a draft of the page here:

www.barrettcv.com/draft_so.html

If you would like the gist of how the page should work, simply view it in Firefox (with browser window smaller than 992 and scroll down. The side panels start off attached, and then 'fix' to become static while the rest of the content moves. This is the correct behaviour

The problem arises in Chrome. When the menu column and the details column 'fix,' (scroll down the page a little) all digital hell breaks loose.

When the view window is about 1200px, the space between the menu column and the main content panel doubles up. This isn't as big a deal as the first problem (which has had me attempting to destroy my flat's retaining wall with my forehead) - but it's got me relatively flumoxed, as I'm sure there must be a more elegant solution that forcing it back into position with media queries

Upvotes: 1

Views: 494

Answers (2)

Pero P.
Pero P.

Reputation: 26992

It looks like you are coming up against an issue in how the different browsers calculate the position of fixed position elements when no positional CSS properties are defined for the element e.g. top and left. From the spec:

...user agents are free to make a guess at its probable position.

For the purposes of calculating the static position, the containing block of fixed positioned elements is the initial containing block instead of the viewport...

I think the only way around this is to choose a different positioning scheme. You can remove the .col-md-pull-* and .col-md-push-* classes and reposition the Bootstrap columns by using absolute positioning (depending on media queries to arrange those columns how you want for different viewport sizes). In this case it appears all browsers honour the position of the fixed element.

.row {
  position: relative;
}

/* apply to the details column */
.push-9 {
  position: absolute;
  left: 75%;
}

Example: http://bootply.com/92096

Upvotes: 1

Waclock
Waclock

Reputation: 1726

What you need to do is to fix both left and right column, starting from that you will have a much better way of controlling your divs (since you want them fixed as I can see).

So, sumarizing: you need to add position:fixed to both your left and right columns. Modify your left: x% and right: x% so that they match your criteria.

Upvotes: 0

Related Questions