4

I'm working on a navigation bar for a page using only HTML and CSS. It should look like this, with the logo setting the height of the containing div, then with the text vertically centered in other divs next to it.

What it should look like:

What it should look like

I've tried to do this by setting up some nested flex boxes. The idea is that:

  • The container (nav-holder) stretches to fit the tallest content
  • The second container (nav-item) should all be as tall as its parent
  • The third container (nav-cont) should be as tall as its own content, and should be vertically centered inside nav-item

Instead, I'm ending up with an odd extra bit of space at the bottom of my logo inside nav-cont, and I can't work out where it's coming from.

It looks like this:

What it really looks like:

What it really looks like

HTML code:

<div id="header">
    <div id="nav-holder">
        <div class="nav-item">
            <div class="nav-cont"><img src="images/placeholder-logo.jpg"/></div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Listings</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Services</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">About</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Blog</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Contact</div>
        </div>
    </div>
</div>

CSS Code:

#nav-holder {
    background-color: blue;
    display: flex;
}

.nav-item {
    background-color: yellow;
    display: flex;
    align-items: center;
    margin-right: 0.5em;
}

.nav-cont {
    background-color: green;
}

Attempted fixes:

  • Checked to see if there was a margin or padding set for images or for divs in general.
  • Looked for information in the most similar solved problem on StackOverflow ("CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent height")
  • Went through a couple of flexbox tutorials to see if there were any similar issues described, including "Solved by Flexbox" on GitHub and "Dive into Flexbox" by Greg Smith
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
elegant-solutions
  • 91
  • 1
  • 9

1 Answers1

0

I have took at look at your code and changed some CSS to try to get the idea of what you want. 

#nav-holder {
    background-color: blue;
    display: flex;
}

.nav-item {
    background-color: yellow;
    display: flex;
    align-items: center;
    margin-right: 0.5em;
    padding: 10px;
}

.nav-cont {
    background-color: green;
    width: 70px;
    text-align: center;
}

Here is a Jsfiddle:

https://jsfiddle.net/r3msjtnL/

You had to change the nav-cont div to a pixel and float the text in the center, so it is not unbalanced. Also, I added a padding to make space around your nav.items.

Update:

If you do not want your buttons being fixed to a specific pixel, attempt changing the width to a percentage (%) instead !

If this helped vote up !

  • Your link doesn't work. – JakeParis Feb 18 '17 at 19:29
  • https://jsfiddle.net/r3msjtnL/ –  Feb 18 '17 at 19:30
  • Sorry, no go. First, I don't actually want to force all my items to be the same width--the one with the logo should be able to stretch to fill the logo. (Which it does fine now.) But it still doesn't get rid of that 'extra' bit of green on the bottom, even if I remove the padding. (It looks like it does in the JS fiddle because the image isn't there and doesn't stretch out the `
    ` the same way.
     – elegant-solutions Feb 18 '17 at 20:20
  • Is there anyway you could link me a URL of your logo, ill play around with it on Jsfiddle. –  Feb 19 '17 at 00:21
  • @L.S actually @Michael_B provided a solution in the comments to the original. I just needed to set the image to `display: block`. – elegant-solutions Feb 19 '17 at 17:29