How to position fixed without interfering with the width

Question

Wondering how to have my #header positioned fixed and not having it become wider.

I checked my code several times and can't seem to figure out what is interfering with the width of my header. For some reason it becomes wider and jumps a bit down while I gave it a 70% width before and don't change the width anywhere later on.

How can I have my header position fixed with the correct width: 70% and not having it jump down? Also is there a correct way or better way than I have now to have my "My name" & my nav next to each other in the #header? My name on the left and the nav on the right in the #header.

HTML5:

    <body>
 <section id="Header" class="group">
  <header>
       <h2><a href="http://www.epicforever.com">My Name</a></h2>
  </header>
  <nav class="main">
   <ul class="group">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
       </ul>
  </nav>
     </section>

     <section id="TopContainer" class="group"> 
  <p>Welcome to my Portfolio</p>
  <p>Webdevelopment is my passion and I'd love to design and develop a website for you        
      sometime!</p>
      <div class="block1">
   <header><h2>Brand</2></header>
  </div>
  <div class="block2">
   <header><h2>Web</h2></header>
  </div>
  <div class="block3">
   <header><h2>Design</h2></header>
  </div>
  <aside><p>See all projects<a href="#">// brand // web // print</a></p></aside>
 </section>

CSS3:

html {
width: 100%;
    }


body{
background-image: url("img/bg.png");
font-family: arial, 'Lucida Sans Unicode';
font-size: 87.5%;
line-height: 15px;
color: #000305;
    }

#Header, #TopContainer, #MidContainer, #AboutContainer, #ContactContainer{
width: 70%;
margin: 0 auto;
    }

#Header{
padding: 0 10% 0 10%;
background-color: #fff;
margin-top: -8px;
position: fixed;
    }

#Header header h2 {
padding-top: 13px;
    }

#Header nav{
text-align: right;
    }

#Header nav ul li{
list-style: none;
display: inline-block;
padding: 5px;
    }


#TopContainer{
height: 150px;
padding: 0 10% 10% 10%;
background-color: #fff;
margin-top: 90px;  /* change this at the end*/
}

I have still not found the solution, but giving body a border of 1px kind of solves the issue. — Ghost, Oct 19 '13 at 14:06
I changed the css to: #Header header h2 { position: absolute; margin-top: 4px; } #Header nav{ text-align: right; position: relative; } But I wonder whether this is the correct way of handling this. — , Oct 19 '13 at 14:13

Ghost · Answer 1 · 2013-10-19T14:40:05.187

0

So after spending 10 minutes on this, I saw that you have not specified the top position in #header after giving it a position fixed.

so your css should be

#Header{
    padding: 0 10% 0 10%;
    background-color: #fff;
    margin-top: -8px;
    position: fixed;
    top:0px;
}

Here is the fiddle http://jsfiddle.net/mW5aS/1/

EDIT: // To make header and nav side by side

You can use float property.

#Header header{
    padding-top: 13px;
    float:left;
    width:55%;
}
#Header nav {
    text-align: right;
    float:right;
    width:40%;
}

Here is the fiddle http://jsfiddle.net/mW5aS/2/

edited Oct 19 '13 at 14:40

answered Oct 19 '13 at 14:11

Ghost

396
1
15

Thank you for your answer. However I want the nav next to my header on the right side. And I'd like to have some space between the #header and the body on the top. I had already figured out top:0px; , but that will stick the #header to the top of the body. I'd also like the nav on the same line as the header. Hope this clarifies things a bit. Take a look at this header,,, which is what I am trying to reproduce: http://www.ruthkelly.me/ – Oct 19 '13 at 14:22
@Brain To get it side by side you can use the float property and float #header to left and nav to the right... here is the fiddle http://jsfiddle.net/mW5aS/2/ . Let me know if that helps – Ghost Oct 19 '13 at 14:36
Hey Ghost, I am trying to get it done with the float property. But yes you're right, the float property does indeed get is side by side in this case. However if I add a position:fixed to my #header, the whole #header get's messed up. It jumps down and becomes more wide. It pushes my whole body a bit down. This is what I've got and need to get it working with position:fixed; `#Header{ padding: 0 10% 0 10%; background-color: #fff; } #Header header h2 { position: absolute; margin-top: 4px; } #Header nav{ text-align: right; position: relative; }` – Oct 19 '13 at 14:47
@Brain.. did you see the fiddle (jsfiddle.net/mW5aS/2). i added the position:fixed to #header and also the float properties, the header seems to be in correct position – Ghost Oct 19 '13 at 14:50
Ghost, I copy/pasted your your code and it's not working for me. I don't want the header sticking to the top of the page. I want some space between the top of the page and my #header. And I am trying to realise this preferably without the float properties. The fixed position is working but the #header is wider than it is supposed to be. Be aware of my css: html{ width: 100%; height: 100%; } body{ background-image: url("img/bg.png"); font-family: arial, 'Lucida Sans Unicode'; font-size: 87.5%; line-height: 15px; color: #000305; width: 90%; height: 100%; margin: 1% auto; } – Oct 19 '13 at 15:02

How to position fixed without interfering with the width

1 Answers1