Why does fixing the header screw up its width?


#1

I'm on Build a Resume exercise 4: Fixing your header.

I originally made the header have a block display so that it would take up the whole page. Everything looked great. However, when I add in position: fixed; and z-index: 1; as prompted to in the exercise, my header div starts taking up only the amount of space it requires instead of the entire width of the page.

#header {
    display: block;
    text-align: center;
    background-color: teal;
    position: fixed;
    z-index: 1;
    margin-top: -20px;
}

Besides how to fix this, can anyone explain why I need to even add in the position and z-index if everything looks fine without them? When I didn't have them, I didn't need to make a margin-top of a negative number either, since all my divs aligned properly.

Thanks!


#2

@yuliya.a,
Maybe reading the Book
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
will help you in your quest......


#3

If you don't find your answer in Leon's reading suggestions then paste in all of your HTML and CSS code


#4

if you want your #header to span the full width, you can simple give it a width of 100%?

Z-index is not needed in the case, but it doesn't hurt to have it as fail safe.


#5

@leonhard.wettengmx.n Thank you for this info! I read up on z-index and understand it better now, but did not find the answer I was looking for here.

@stetim94 If I give the header a width of 100%, it's wider than the rest of my elements because of my margins. I can obviously try different width percentages and see which one works, but I'm hoping for a "smarter" solution/explanation.

@zainabrawat My HTML and CSS code is below. Thank you!

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	    <div id= "header">
	        <h1> Header </h1>
	    </div>
	    
	    <div class= "left">
	        <h3> Experience </h3>
                <p> Experience One </p>
	            <p> Experience Two </p>
	            <p> Experience Three </p>
	    </div>
	    
	    <div class= "right">
	        <h3> Skills </h3>
	            <ul>
	                <li> Skill One </li>
	                <li> Skill Two </li>
	                <li> Skill Three </li>
                </ul>
	    </div>
	    
	    <div id= "footer">
	        <h2> Footer </h2>
	    </div>
	</body>
</html>

* {
    font-family: Georgia;
    margin: 0.25em;
    padding: 0.5em;
}

div {
    border-radius: 5px;
    border: 0.25em solid black;
}

#header {
    display: block;
    text-align: center;
    background-color: teal;
    position: fixed;
    z-index: 1;
    margin-top: -20px;
}

.left {
    float: left;
    position: inline-block;
    background-color: #00cdcd;
    width: 60%;
    height: 400px;
    margin-top: 150px;
}

.right {
    float: right;
    position: inline-block;
    background-color: #00cdcd;
    width: 25%;
    height: 400px;
    margin-top: 150px;
}

#footer {
    display: block;
    clear: both;
    text-align: center;
    background-color: teal;
}

#6

I saw go with what stetim94 said add width.. about 95% should do the trick. Its a bit complicated with all the percents, margins and padding.


#7

There is no "smarter" solution. the only thing i can think of is to make all the margins and padding percentage. then you can calculate how many percent the header should be in width, you might want to add a max-width or min width, so the padding/margin doesn't become to huge.

Here is the problem, because your header is fixed, percentage which will calculated from the body or even the html. Which is screwed. You can't just wrap it in a div.


#8

Makes sense. Thank you @zainabrawat and @stetim94!

I still don't understand why the width is getting messed up in the first place, even though the header has a block display. I guess another line of code is overruling that. Any idea what it is?


#9

The universal selector is a poor choice for setting margins and padding. It will apply to every element, parent or child. Set the font-family on the body element, and set margins on elements as apply in each case.


#10

Thank you for the tip!


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.