Build a resume: overlapping header

I’m currently on the last lesson of css, building a resume. I have done everything to pass but I can’t seem to get my resulting resume’s header to not overlap with the other elements. Can you guys help? Thanks in advance!

My result:

My Html:

 		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
 	    <div id="header">
 	    <h3> Header</h3>
 	    <div class="left">
 	    <div class="right"><ul>
 	    <li> list</li>
 	    <div id="footer">
My css:
  • {
    border-radius: 5px;
    .left {
    height: 400px;
    width: 20%;
    background-color: aqua;
    border: 2px solid yellow;
    float: left;
    .right {
    height: 400px;
    width: 75%;
    background-color: #eeefff;
    border: 2px solid black;
    float: right;
    #header {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    margin: 15px 15px 15px 0px;
    position: fixed;
    z-index: 1;
    clear: both;
    display: block;
    #footer {
    width: 100%;
    height: 50px;
    border: dotted 1px black;
    clear: both;
    position: relative;
    float: both;
    margin-top: 10px;
    padding: 5px;

Hello @kimcheezz! We Cant see your code! Please look HERE To get correct code formatting and we can help you…

Thanks amanuel, I have fixed my original thread now.

From what I could see, the problem is you’ve set the header’s position to fixed. With it set to fixed, it will always stay in view regardless of how far down you scroll. The example resume does the same thing, but it’s only noticeable if you don’t view it in preview mode. It’s likely that it was intentional, since it’s a resume and they probably wanted to keep the name and email in constant focus. I’m not really great with positioning, but to keep it at the top, you’ll have to use something other than “fixed.”

a solution would be to add this to your code:

.left, .right {
  margin-top: 67px;

this way you can keep your position: fixed; and it looks good. How does this work? Your #header is fixed, so is ignored by .left and .right when positioned, so you have to push down .left and .right manually. How did i get to 67px? simple, your #header margin-top of 15px, is 50px in height + 2px for .left and .right his border.

I highly recommended to add div { box-sizing: border-box }, this will make padding and border part of the height and width of your div elements.

1 Like

Hi eternallocket,
wow, i never noticed that the example also has this problem outside of the preview box. thanks!

Hi stetim94,

Thanks for your response. I am not familiar with the box-sizing property myself. Guess I learned something new!
I also wasn’t aware that position:fixed would waive the float property. Thanks for telling me!


Position: fixed is taken out of flow, even if you have two simple boxes this becomes a problem. I wrote an extensive answer on position here, maybe worth the read

The link looks to be empty?

oops, http:// was missing. Weird, anyway, it should work now

Great! I realised I have read that thread already. It really helped me to understand relative vs. absolute vs. static positioning. Thank you so much for the help!

you’re welcome, good it helped you. One more tip (we are going bit off topic here), body has a margin by default, i recommend to remove it:

body { margin: 0 }

Got it! Thanks stetim94!