Why aren't child divs staying on the same row unless I add extra width to parent?

Question

I am making a header with 2 images as below:

<div id="header-logo">
    <div class="header-logo"><img src="logo.png"></div>
    <div class="header-name"><img src="logo-name.png"></div>
</div>

with the following css:

#header-logo { width: 538px; margin: 0 auto; }
#header-logo div { display: inline; height: auto; }
#header-logo div.header-logo { width: 183px; }
#header-logo div.header-name { width: 355px; }

The problem is that unless I make the parent div (#header-logo) 542px or bigger the child divs go below each other, I don't understand why as 183 + 355 = 538, where is the extra 4 pixels coming from?

have you tried this? http://stackoverflow.com/questions/4760002/how-to-remove-image-padding-that-is-showing-up-unintentionally basically adding display block to your images. — Cacho Santa, Oct 02 '15 at 00:58
Thanks guys, removing the white space between the div's solved it. I've never had the problem before, maybe I've just never done this — milky_jay, Oct 02 '15 at 01:13

score 1 · Accepted Answer · edited May 23 '17 at 11:53

You're dealing with the spaces that are characteristic of inline elements.

If you're writing text in a <p> element and you hit the space bar or add a line break, that space is rendered by the browser. This same behavior applies to all inline elements, like images and inputs.

The fastest way to resolve the issue is:

Add font-size: 0 to the parent element. In your code, just do: div { font-size: 0; }, OR
Remove all spaces and line breaks between elements:

<div id="header-logo"><div class="header-logo"><img src="logo.png"></div><div class="header-name"><img src="logo-name.png"></div></div>

Other options include negative margins, omitting closing tags, using comment tags, floats and flexbox. See this article for details on each method:

Fighting the Space Between Inline Block Elements

For more details about this issue see:

How to remove the space between inline-block elements?

Thanks @Michael_B, removing the white space solved it! – milky_jay Oct 02 '15 at 01:14 — milky_jay, Oct 02 '15 at 01:14

Why aren't child divs staying on the same row unless I add extra width to parent?

1 Answers1