Linebreak in document out of nowhere

Question

In the following code, I want the two columns to start on the same line. It seems like there is a linebreak on the right side. Any ideas how to fix it? I guess this is an easy piece for the CSS-gurus here.

And how to make the right column be 100% in height of the parent div. I tried setting it to 100%, but then the border exceeds the border line of the div.

The code:

<div style="width:550px; padding:0 20px 20px 20px; background:#fff; margin:0 auto; border:3px #000 solid;
    moz-border-radius:5px; -webkit-border-radus:5px; border-radius:5px; color:#454545;line-height:1.5em; " id="email_content">

    <div style="border-top:1px solid #eee;padding:5px 0 0 0;" id="email_footer">Information</div>
    <h1 style="padding:5px 0 0 0; font-family:georgia;font-weight:500;font-size:24px;color:#000;">Headline</h1>
                <div style="float:right;margin: 0px 20px 15px 15px;padding:0px 0px 0px 10px;width:150px;height: 50;border-left: 1px solid #000000;"><p>test</p></div>
                <p style="color: #000000;">test</p>
</div>

Screenshot: enter image description here

If you inspect the elements involved, and have it show you the margins on the elements, you'll see clearly :) — Niet the Dark Absol, Nov 11 '14 at 17:52
It looks like if I remove the `
` tags inside the right column, it works. But I'm really having a hard time finding a better fix for it. Should I have one div for the left side, and one for the right? — janlindso, Nov 11 '14 at 18:19

score 0 · Answer 1 · answered Nov 11 '14 at 17:52

0

Give the elements the inline-block display.

See this fiddle: http://jsfiddle.net/bgzqrbh5/

answered Nov 11 '14 at 17:52

k-nut

3,447
2
18
28

It's the two `test` words that should be in line. – janlindso Nov 11 '14 at 18:10

Linebreak in document out of nowhere

1 Answers1