Aligning Inline-Blocks Horizontally on the Same Line

Problem

Inline-blocks offer advantages over floating elements, such as baseline alignment and automatic centering when the viewport becomes narrow. However, aligning two inline-blocks horizontally on the same line can pose a challenge.

Challenges of Inline-Block Alignment

• Floats may interfere with baseline alignment and cause unwanted wrap-around.
• Relative and absolute positioning can lead to spacing issues, similar to floats.

Solution: Using Text Justification

One effective solution involves utilizing the text-align: justify technique:

CSS Code

.header {
    text-align: justify;
    background: #ccc;
}

.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

Explanation

• Set the parent element's text-align to "justify" to distribute text evenly across its width.
• Add a pseudo-element header:after to consume the remaining space between the inline-blocks.
• Set the inline-blocks h1 and .nav to display: inline-block and vertical-align: baseline to maintain their baselines.