19

I have the following layout

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div>
    <div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

because in html there's a change-line between closing and opening div (div1 and div2), browsers add a "space" character in place of the line-break which results in having the second div to display underneath the first div.

However if you remove the \n between the div1 and div2 then they display next to each other which is the expected behaviour.

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div><div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

However this makes code looks ugly. I am currently using <DOCTYPE html>. I have also tried switching to XHTML but didn't work. I am pretty sure there's some way of eliminating this behaviour of line-breaks, any ideas?

FYI: I do not want to use float or parse my html output in php during rendering to remove the line-breaks.

Blender
  • 289,723
  • 53
  • 439
  • 496
ptheofan
  • 2,150
  • 3
  • 23
  • 36
  • Try to `float:left` your divs instead. – Niklas Oct 25 '12 at 06:49
  • which browser are you having an issue with? – DA. Oct 25 '12 at 06:51
  • 1
    *Browsers* **DON'T** render new lines as spaces. The problem is somewhere else! – Itay Grudev Oct 25 '12 at 06:51
  • If it is not too much trouble, you could use span instead of div. Spans shouldn't mess up your layout, where divs can. – konqi Oct 25 '12 at 06:57
  • Like I said, no floats (floats tend to mess up alignments and adding padding/margin to vertical align is just stupid and is not cross-browser/cross-environment safe). – ptheofan Oct 25 '12 at 07:02
  • @JoSo, divs are block-type containers, spans are not, so this is not a solution. Plus this will still not eliminate the effect. – ptheofan Oct 25 '12 at 07:10

4 Answers4

9

One more possible way is to set the font-size of the parent to zero and then set the font-size of child elements to whatever you need. Like:

#mybar { font-size: 0; }
#mybar span { font-size: 14px; }

However, you have to be aware that font-size = 0 is displayed different depending on the browser: http://webdesign.about.com/od/fonts/qt/tipfont0.htm

I tested in Firefox and works as expected. If I remember correctly, the minimum font size can be also set depending on the browsers, so, it may not be consistent.

lepe
  • 24,677
  • 9
  • 99
  • 108
3

One way to fix it is to use "display: table-cell" instead of "display: inline-block".

lepe
  • 24,677
  • 9
  • 99
  • 108
2

Possible duplicate on Removing whitespace between HTML elements when using line breaks

You can either use float:left css style or just comment the spaces between tags:

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div><!--
    --><div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

Later edit: I think the css solution is to set font-size:0px; to the container div so:

<div style="width:100px; font-size:0px;">
    <div style="width:50%; display: inline-block; font-size:11px;">
        div1
    </div>
    <div style="width:50%; display: inline-block; font-size:11px;">
        div2
    </div>
</div>

should solve the problem.

Seen on CSS unwanted spacing between anchor-tag elements

Community
  • 1
  • 1
Mihai Matei
  • 24,166
  • 5
  • 32
  • 50
  • they deal with the same subject, missed that post. srz. Thought adding comments but it's still just ugly. I am pretty sure I've seen work around. Actually I remember seeing it in some job and the css guy had done something to fix it, but I can't remember on which project I had seen that). hm, what if I add :after with font-size 0? Might do the trick for all but some IE versions. I'll give it a try after office hours :D – ptheofan Oct 25 '12 at 07:06
  • I've just edited my answer so I think the css solution you searched for is to set `font-size:0px;` to the container div – Mihai Matei Oct 25 '12 at 07:12
  • That's a possible solution but would then have to specify font-size again on children elements. It's not a bad idea but I am not sure loosing the inherit in font size will actually be beneficial or a time waster – ptheofan Oct 25 '12 at 07:18
  • yah.. I just use `float:left` but in this case I have to specify a fixed width to the elements which, I think, is not what you really want – Mihai Matei Oct 25 '12 at 07:24
2

I think the only actually good solution is to switch divs with list

<ul style="width:100px">
    <li style="width:50%; display: inline-block;">
        div1
    </li>
    <li style="width:50%; display: inline-block;">
        div2
    </li>
</ul>

typically 'reseting' the list properties will make it look like a div. The benefit is that browsers will not generate space between <li> items.

ptheofan
  • 2,150
  • 3
  • 23
  • 36