Menu icon Foundation
Fixed Position - Offset Hack, better solution?

I'm using a fixed position div in the grid and it works but it ignores the column count of the fixed column. I can sort of get around this by offsetting the next column by width of the fixed column but it's a hack and has issues.

Is there a better solution to a fixed div?

<div class="row">
    <div class="medium-2 columns">
		<div style="position:fixed">
			fixed content
		</div>
	</div>
	<div class="row">
		<div class="medium-3 medium-offset-3">
			Scrolling Content
		</div>
	</div>
</div>

cssfixed position

I'm using a fixed position div in the grid and it works but it ignores the column count of the fixed column. I can sort of get around this by offsetting the next column by width of the fixed column but it's a hack and has issues.

Is there a better solution to a fixed div?

<div class="row">
    <div class="medium-2 columns">
		<div style="position:fixed">
			fixed content
		</div>
	</div>
	<div class="row">
		<div class="medium-3 medium-offset-3">
			Scrolling Content
		</div>
	</div>
</div>

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Peter!

Check out this Pen I made: http://codepen.io/winghouchan/pen/wcrAI

Wing-Hou Chan over 5 years ago

Hey Peter!

Check out this Pen I made: http://codepen.io/winghouchan/pen/wcrAI

Peter Surrena over 5 years ago

So, it's still a hack...hopefully there's a solution soon.

Wing-Hou Chan over 5 years ago

Well, this is probably the best way to achieve a fixed width column in responsive design.

The problem with using Foundation's offsets is that it is a percentage so the gap between your fixed width column and your responsive column will change and there may be a possible overlap.