CODEWITHSUNDEEP
htmlcss
AndroidDev
AndroidDev

Reputation: 21237

`inline-block` behaving like `block`

This couldn't be any simpler, but somehow I can't figure it out. I want an image to be on the far left, and a series of buttons to be right aligned as a group. Everything should appear on one row.

    #titleframe {width:100%; height:85px; display:inline-block;}
    
    #logo {width:256px; height:85px; margin-left:20px;}
    
    #logo img {width:100%; height:auto;}
    
    #menu-buttons-container {display:inline-block; float:right; height:40px;}
    
    #menu-buttons button {width:75px; height:40px;}
    <div id="titleframe">
        <div id="logo"><img src="https://..."></div>
        <div id="menu-buttons-container">
        	<button>text</button>
        	<button>text</button>
        	<button>text</button>
        	<button>text</button>
        	<button>text</button>
        </div>		
    </div>

But when this renders, I get the logo where i want it, and the buttons are indeed right aligned. However, the button row is placed one row below the logo. It's supposed to be on the same row - that's what inline-block is for, right? It's rendering as if I were using block rather than inline-block.

Why aren't my buttons placed on the same row as the image is? There is plenty of width for everything to fit.

Thanks!

Upvotes: 1

Views: 607

Answers (1)

Jaeeun lee
Jaeeun lee

Reputation: 456

You need to make #logo inline-block too.

https://jsfiddle.net/7b91bo0p/

#logo {width:256px; height:85px; margin-left:20px;display:inline-block}

Upvotes: 1

Related Questions