CODEWITHSUNDEEP
htmlcssnavbar
Hiigaran
Hiigaran

Reputation: 831

Creating a justified, equally spaced navbar

I was browsing a few pages here and found something that almost worked for my needs, which was to have a navbar on a webpage with all the links equally spaced from each other, as if justified, and having an 8% padding on the left and right, so that the background of the navbar spans the width of the page, but the containing the links does not exceed the 8% limitation.

I don't have the code since I deleted it and went for another design a while ago, but since I want to revisit the idea, I'm hoping someone could offer me a solution. The method I used before involved sticking an empty under the navbar with a width set, but a height of 0. However, even with the height at 0, I still ended up with a navbar that had extra space underneath, taking up some amount of height, and ruining the symmetry that most navbars have above and below. To provide an example, the excessive space I'm referring to is the green bit here:

enter image description here

Upvotes: 0

Views: 143

Answers (2)

geebru
geebru

Reputation: 136

Codrops did a post on a fully justified (and vertically centered) header that might fit your needs.

http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

I've never heard of this 8% trick so I can't help you with that specific implementation of a fully justified header.

Upvotes: 0

Travis
Travis

Reputation: 369

It sounds like this article is what you're looking for:

http://code.jelmerdemaat.nl/2012/perfectly-justified-css-grid-technique-using-inline-block/

In brief, you'll want your code to look something like this:

CSS:

.wrapper{
  width: 550px;
  text-align: justify;
  margin: 20px auto;
}

.wrapper div{
  background: white;
  display: inline-block;
}

.wrapper div:first-child {
    padding-left: 8%;
}

.wrapper div:last-child {
    padding-right: 8%;
}

.wrapper:after{
  content: "";
  width: 100%;
  display: inline-block;
}

/* Only to see effect better */
body{ margin: 0; font-family: sans-serif; font-size: 12px;}
.wrapper,.wrapper div{ padding: 5px; }

HTML:

<div class="wrapper">
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
</div>

The magic is in the .wrapper:after portion of the code, which makes the align justify kick in and do its stuff.

jsfiddle:

http://jsfiddle.net/ZrT9T/

Upvotes: 1

Related Questions