0

I keep reading articles that floats are outdated and that using inline-block solves problems such as having to use clearfix and a few more. These articles go on to justify inline-block by showing the same example: three squares that are aligned middle. In trying to use inline-block to create a navbar, I come across many problems. My navbar layout looks like such:

<nav id="main-nav" class="navbar">  
    <div class="logo">
       <!-- image -->
    </div><!--   
 --><div class="navbar-header"><!-- 
     --><button type="button" class="navbar-toggle closed">
            <span class="sr-only">Toggle navigation</span>
            <i class="fa fa-bars"></i>
        </button>
    </div>     
    <div class="navbar-collapse navbar-sidebar">    
        <ul class="navbar-nav">
            <!-- list-items -->
        </ul>
    </div>                
</nav>

In order to align the logo left and the navbar-toggle button right, I had to use text-align justify and some special markup, which I find just as obtrusive as clearfix (Align two inline-blocks left and right on same line):

.header {
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

.logo {
    display: inline-block;
    vertical-align: top;       
}
.navbar-header {
    display: inline-block;
    vertical-align: middle;         
}

My navbar is very similar to Bootstrap's. At small screen sizes, I want my navbar-toggle button to be centered in the navbar area. Vertical align: middle, however, would align this button to the middle my logo, which will be shorter or taller than the navbar, and which I also want aligned to the top of the navbar. Inline-block doesn't allow me to vertically align my content to the parent container, which seems to make it a non-viable option in many layouts. Is there some sort of solution where I can align my content to the container, rather than the sibling elements? I've been experimenting with setting different line heights and vertical-aligns.

Community
  • 1
  • 1
Mouse6541
  • 175
  • 2
  • 11
  • Can you make it short for what the issues are exactly? Also together with Bootstrap things are going to be more difficult to work with, and make a demo. – Stickers Jun 13 '15 at 21:37
  • The main issue is that with inline-block, I'm finding it only possible to v-align a child element with its sibling elements. I was under the impression that inline-block made it possible to v-align child elements to their parent container. Now I see that the interactions between child elements makes it hard to control the alignment of these elements with respect to their container. I want my logo element to be aligned to the top of the navbar, but my .navbar-header (with button inside) to be aligned to the center of the container. – Mouse6541 Jun 13 '15 at 21:52
  • In that case you could do inline block within another inline block, also table cell is very hand for v align stuff. – Stickers Jun 13 '15 at 22:52
  • As far as the first solution, adding more markup would definitely outweigh using floats, since I already introduced markup as obtrusive as clearfix to make this work, as well as additional properties such as "vertical align" and "display: inline-block". As far as the 2nd solution, declaring "display: table" on .navbar-header will move it to a new line, so I would need either a floated container, or a inline-block container. – Mouse6541 Jun 13 '15 at 23:57
  • So I've technically achieved what I wanted with no floats, but definitely not in an ideal manner (I've created the same layout with floats before in a closer-to-ideal manner). First, "offense" was I specified that I want the .navbar-header to be the height of the .navbar (70px). Second, I created a ghost element inside .navbar header that has a height of 100% by which to center my button. The greatness of inline-block is supposed to be that you can center without declaring heights/widths. I just don't see any way to center in this case without declaring a height. Am I missing something? – Mouse6541 Jun 14 '15 at 00:08
  • In general, v align on inline block is relative to siblings, and v align on table cell is truly aligning the child elements. I still don't know what you're trying to achieve, I've made a simple demo with css table layout, you can update it and show what the issue is - http://jsfiddle.net/ys5ecbe5/ I think css table is a better choice for the case, because you can get both v align and h align done at the same time. – Stickers Jun 14 '15 at 00:27
  • Sounds good! I guess I tried to avoid table for a navbar since I haven't seen it and because a lot of people swear by inline-block in most cases, but it does appear to most practical if I am trying to center based on the navbar container. – Mouse6541 Jun 14 '15 at 02:55

1 Answers1

1

If you have followed the comments above, there are many question being asked. I'll try to summaries most of it.

For display:inline-block, the vertical-algin property only affects the position of the element itself, and relative to the position of the siblings (the tallest sibling especially).

Percentage height like height:100%, only works with fixed height of parent container, or all percentage height that is set all the way back to <html> tag. But excluding positioned (relative, absolute etc.) elements, and viewport units vh, and maybe some other cases.

For display:table-cell, the vertical-algin property affects all the child elements, again excluding some positioned ones.

I think CSS table is easiest way to get your desired layout done in this case. Since you can easily have both vertical and horizontal alignments set on it. Here is a simplified workaround.

JsFiddle Demo

.nav {
    border: 1px solid red;
    display: table;
    width: 100%;
}
.nav > div {
    display: table-cell;
    vertical-align: middle;
}
.logo img {
    display: block;
}
.menu {
    text-align: right;
}
.menu span {
    border: 1px solid blue;
}
<div class="nav">
    <div class="logo">
        <img src="//dummyimage.com/50"/>
    </div>
    <div class="menu">
        <span>Menu</span>
    </div>
</div>
Stickers
  • 75,527
  • 23
  • 147
  • 186