Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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.

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?