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

Michael Weir
Michael Weir
5,008 Points
Posted by Michael Weir
Michael Weir
5,008 Points

Weird content overlap and browser resizing weirdness

Hey all - just messing around on a cheap domain I purchased, setting up a portfolio site. I've got the basic layout completed but as you can see the header content is overflowing into the <div> below it. I know this is covered in one of the lesson videos but I don't have time to re-watch them until I find it so I figured I'd ask for help. :)

Also, concerning the header, as a browser window resizes narrower and narrower, the negative spacing around the nav buttons and the placeholder logo image get all out of whack until they are no longer aligned horizontally. I've become quite frustrated trying to figure out how to keep both the logo and the nav elements aligned with each other during browswer resizing.

URL: www.mbwcreate.com

CSS: url/css/style.css url/css/grid.css

Thanks in advance, Mike

2 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

For your first problem you have the following in your css:

body {
  padding-top: 75px;
}

You need to increase that until it matches the height of your header. This effectively pushes down your content until it's below the header. I came up with around 107px. Basically, since your header is fixed it no longer takes up space in the document so you need padding/margin to take up the space the header would have taken up if it was there.

It's better to use em's here though in case the user increases their font size. This will increase the height of your header but your padding will still be stuck at its pixel value and not increase with the header. Using em's will allow the padding to increase. It won't be perfect but better than using pixels. I came up with around 6.8em

Michael Weir
Michael Weir
5,008 Points
Michael Weir
Michael Weir
5,008 Points

Thanks for the reply, Jason. I did try the 75 px thing last night and bumped it up to 100 but that seemed like "cheating". I guess I should get used to that with CSS coding eh?

Now for that pesky header resizing problem.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Michael,

I wouldn't consider it cheating. You have to take up the space that would have been occupied by the header somehow. A top padding on the body works.

Also, you could apply a top margin to your h2 that follows the header and that would be another way to do it.

I took another look at the site just now. It looks like you might have your header resizing problem fixed?