non-existent, but existent margin causing elements to drop to new line as combined width >100%

Question

In the page linked below, there are two <section>s in a <header> and their combined width is 100%. 20% to the left, pink <section> and 80% to the right, green <section> and there are no borders, margins, or padding.

Except there seems to be a margin on the two sections causing the rights, green one to drop to a new line.

I know this because when I give a negative margin-right to the left, pink <section> and the right, green <section> then they fit on the line inline.

Where is this margin coming from and how can I get rid of it without nastily applying negative margins?

Also, and in other words, how can I get the two <section>s to fit on one line inline?

Here is the page where this is happening: https://dl.dropboxusercontent.com/u/270523/help/new.html

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

Whitespace.

If you instead of this:

<header id="header">
    <section id="logo">
        <!--<img data-gif="data.gif" data-png="data.png" src="logo.svg" />-->
    </section>
    <section id="input">
        <input id="searchInput" type="text" name="search" autocomplete="off" />
    </section>
</header>

Do this:

<header id="header">
    <section id="logo">
        <!--<img data-gif="data.gif" data-png="data.png" src="logo.svg" />-->
    </section><section id="input">
        <input id="searchInput" type="text" name="search" autocomplete="off" />
    </section>
</header>

it displays side-by-side just fine. See proof in jsfiddle.

This handling of whitespace is byproduct of standard layout and inline content - if you use floats instead, like answered in the other answer, whitespace shouldn't have an impact. This is a feature of HTML/CSS. There is also other threads that have discussed the same.

So in short, there's two ways to fix this:

get rid of whitespace between your inline-block elements
switch to using float:left instead of inline-block for #input, #logo

edited May 23 '17 at 12:04

Community

1
1

answered Apr 21 '13 at 08:10

eis

51,991
13
150
199

seriously it is because there is whitepsace in the code? wow, i didn't know spacing in the code could impact the output of a file like that. I would prefer not to use floats so I'll just not jump to a new line. – Irfan Mir Apr 21 '13 at 08:49
@IrfanMir seriously. You can use the jsfiddle link I provided to test it out and see how it behaves (press run everytime you want to test a change). – eis Apr 21 '13 at 08:56
No, I believe you. I just think it is ridiculous. Isn't there a white-space CSS property. It should have a value of none or 0, does that take care of this issue? – Irfan Mir Apr 21 '13 at 09:46
@IrfanMir [css white-space property](https://developer.mozilla.org/en-US/docs/CSS/white-space) relates to how whitespace is handled within the element, typically between words in a textual content. It does not take numeric values, and you can only make sequence of whitespace collapse into one, not make whitespace disappear. In this case, we're talking about whitespace between elements, not within an element. – eis Apr 21 '13 at 14:02
Ah, okay. That is what I found when I did my research on the property, too. But thank you for explaining. – Irfan Mir Apr 21 '13 at 22:32

score 0 · Answer 2 · answered Apr 21 '13 at 08:07

0

<section> is a block element, and will not display side-by-side without using float;

try this:

#logo { float: left; }

answered Apr 21 '13 at 08:07

David Houde

4,835
1
20
29

Or `display: inline-block` – Swadq Apr 21 '13 at 08:15
1

It would display side-by-side due to inline-block *already used*, but whitespace is preventing it from doing it. Using floats like you suggested is just another way of circumventing the whitespace issue. – eis Apr 21 '13 at 08:24

non-existent, but existent margin causing elements to drop to new line as combined width >100%

2 Answers2