Search code examples
htmlcssinlinedisplay

Using "display:inline-block" but my DIV is still appearing on a new line

I have two block elements that I would like to be on the same horizontal line. One is a FORM and the other is a DIV.

<div id="miningArea">
    <form id="curWorkForm">...</form>
    <div id="buttonDescription">
        To begin, click thde "Start" button.
    </div>  
</div>

I thought adding display:inline-block was the key to keeping the elements on the same line. But when I add

#buttonDescription {
    display: inline-block;
}

My text element still appears beneath my FORM element -- https://jsfiddle.net/5j57hkLr/6/ . How can I get that other DIV element to appear on the same line?

Solution

  • When there is a lot of text, you have to limit the width of inline-block elements by applying width settings to them which allow both elements to fit into one line, for example width: 50% and width: 45% Otherwise they will by default expand according to the text, which will result in 100% width when there's enough text to fill a full line.