Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations The Box Model Positioning Properties

Posted by Shailesh Gupta
Shailesh Gupta
12,885 Points

Position: Fixed

I created an header element having position: fixed and min-width set to 960px. But, when I resize the browser to a width lesser than 960px, the width of the header element also shrinks. Any solution why is it happening?

Here is the code: header{ width: 100%; min-width: 960px; background: #000; padding: 10px; box-sizing: border-box; position: fixed; }

3 Answers

Carla Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points
Carla Thomas
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points

Hi Shailesh,

Percent (%) is a relative value....since you used width: 100%, it will not matter how small or large the screen gets, the width of your header will fill it 100%.

Play around and see if this works instead.

(1) Set your width to 960px; then (2) Set your min-width to 100%.

NOTE: Percentages are used in "Responsive Layouts" because percentages are relative to the screen size (i.e. cell phone).

Shailesh Gupta
Shailesh Gupta
12,885 Points
Shailesh Gupta
Shailesh Gupta
12,885 Points

Hi Carla,

I removed width: 100%, but still getting the same bug. I think it's happening only because I have used position: fixed. When, I am using a different value for the position property then it perfectly gives results as I expect. But, what about the fixed top navigation bars in Twitter and Facebook?

Thanks

Carla Thomas
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points

I am somewhat of a newbie but I Googled How to Create a Fixed Header and got this great tutorial. The tutorial is accompanied by a video that is less than 5 minutes long.

http://www.cssreset.com/creating-fixed-headers-with-css/

Shailesh Gupta
Shailesh Gupta
12,885 Points
Shailesh Gupta
Shailesh Gupta
12,885 Points

Thanks Carla, this helped :)