Bar height ignoring the height of the text itself

Question

This is my code so far. The issue is that the top bar is too thin, it's meant to have 20px padding around the top links but in total the top bar is only 40px high, so it seems it isn't taking into account the height of the links themselves (i.e the bar should be taller). How do I fix this?

    body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
      padding: 20px;
      background-color: #F9F9F9;
    }
    
    #headerbar {
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      position: absolute;
      left: 0;
    }
    
    .post {
      position: absolute;
      right: 0;
    }

   <header>
      <div id="headerbar" class="container">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>

Because logo is `position: absolute` it's essentially floating on top of the header, not in it - therefore padding is working as it should — StudioTime, Jan 26 '16 at 07:50
@DarrenSweeney Is there a way to make the padding or a margin apply? Is the only option to use floats or specify a height? — Jimmy, Jan 26 '16 at 07:51

score 1 · Answer 1 · edited May 23 '17 at 12:31

As @Darren said in the comment, the issue lies in absolute positioning (See this answer for more details how it works). One way to fix this is to use float, and clear after it.

Clearfix styles from HTML5Boilerplate:

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

    body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
      padding: 20px;
      background-color: #F9F9F9;
    }
    
    #headerbar {
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      float:left;
    }
    
    .post {
      float:right;
    }
    
    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

   <header>
      <div id="headerbar" class="container clearfix">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>

JSFiddle

StudioTime · Accepted Answer · 2016-01-26T08:21:48.303

0

Changes to .logo and .post classes

    body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
      padding: 20px;
      background-color: #F9F9F9;
    }
    
    #headerbar {
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      position: relative;
    }
    
    .post {
      position: relative;
      float: right;
    }

   <header>
      <div id="headerbar" class="container">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>

edited Jan 26 '16 at 08:21

answered Jan 26 '16 at 07:53

StudioTime

22,603
38
120
207

What did you change? – Jimmy Jan 26 '16 at 08:10
Have a look at `.logo` and `.post` classes -- will highlight in answer – StudioTime Jan 26 '16 at 08:21

score 0 · Answer 3 · answered Jan 26 '16 at 07:54

body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
     
      background-color: #F9F9F9;
    }
    
    #headerbar {
      
    padding: 20px;
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      padding-bottom:50px;
      
     
    }
    
    .post {
      float:right;
    }

<header>
      <div id="headerbar" class="container">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>

score 0 · Answer 4 · answered Jan 26 '16 at 10:58

0

On a side note, I do not see any box sizing, font sizes and line heights added. These should all be working together to help correct spacing issues throughout devices.

answered Jan 26 '16 at 10:58

Jamie Paterson

426
3
10

Bar height ignoring the height of the text itself

4 Answers4