-1

So i wanted to make my website fluid. So i started with my wrapper and header. The css:

#wrapper {

  max-width:1600px;
    width:100%;
    margin:0 auto;

}

#header {

      margin: 0 auto;
      width: 100%;
      height: 7.5%;
      background-color: #0066FF;
      display: table-cell;
      vertical-align: middle;

    }

The HTML: 

<div id="wrapper">
        <div id="header">
            <div id="logo_wrapper">
                <span class="logonaam1">O</span><span class="logonaam2">b</span><span class="logonaam1">l</span><span class="logonaam2">e</span><span class="logonaam1">c</span><span class="logonaam2">t</span><span class="logonaam1">a</span><span class="logonaam2">r</span><span class="logonaam1">e</span>
            </div>
                <form action="login.php" method="post">
                    <div id="aanmeldform_submit">
                        <input type="submit" name = "submit_login" value="Aanmelden" id="submit_knop" />
                    </div>

                    <div id="aanmeldform_wachtwoord">
                        <input type="password" name ="password" value="" id="aanmeld_knop" required placeholder="Voer je wachtwoord in" />   
                    </div>

                    <div id="aanmeldform_email">
                        <input type="email" name="email" value="" id="aanmeld_knop" required placeholder="Voer je e-mail in" autofocus/>   
                    </div>
                </form>
        </div>

The header should span the entire width of the screen, just like the wrapper. But for some reason, when i set the width of the header also to 100% the header only is like 1/3 of the screen. When i change the width of my header to around 1 - 10 % it DOES span the whole width for some reason. Anyone know what is causing this? Also included a fiddle for better understanding: http://jsfiddle.net/4J7JJ/

When you set the header in the fiddle to 1% you can see it does span the entire width for some reason..

Thanks in advance!

Nicolas
  • 2,277
  • 5
  • 36
  • 82

1 Answers1

0

Try change display

#header {

      margin: 0 auto;
      width: 100%;
      height: 7.5%;
      background-color: #0066FF;
      display: inline-table; /* that fix the problem */
      vertical-align: middle;

    }
pr0metheus
  • 488
  • 6
  • 14
  • 1
    Or `display: inline-block` as it makes more sense than using a references to a table. – Hoshts Jul 03 '14 at 22:09
  • Thank you! It worked for the height, though the height wont change when i set the wrapper height also to 100% and the header height to 7.5% (or 100 even) – Nicolas Jul 04 '14 at 11:32
  • ***** Update: fixed the height problem myself, after some more research i figured out that you have to set the html and body elements also to 100% before you can change the height (header) in this case. Thanks anyway for the information! – Nicolas Jul 04 '14 at 11:48