How to align a range and div on the same line

Question

I have the following HTML:

<div class="mega_parent"> <div class="parent"> <div class="holder"> <span class="holder_under">Left heading</span> <div class="holder_options"> <span class="holder_options_1">Option 1</span> <span class="holder_options_2">Option 2</span> <span class="holder_options_3">Option 3</span> </div> </div> </div> </div> 

and the following CSS:

 .holder { background-color: blue; padding: 10px; } .holder_under { padding-left: 10px; font-size: 16px; color: #999; } .parent { float: left; margin-right: 20px; width: 600px; } .mega_parent { background-color: blue; margin: 130px auto; min-height: 320px; height: 100% auto; overflow: auto; width: 940px; padding: 0px 10px; } 

Question:

How to make a div with class holder_options align on the same line as span with class .holder_under ?

Here it looks like jsFiddle .

Answer 1

Divs are block elements by default. Read more about block level elements.

“Elements are block-level. Their most important characteristic is that they are usually formatted with line breaks before and after the element (thereby creating a standalone content block).

Set the value of display:inline-block;

 .holder_options { display:inline-block; } 

Work with jsFiddle here.

Answer 2

the default div is display:block , which is set to 100% of the width. set it to display:inline or display:inline-block to do just what it needs and let others fit on one line

Answer 3

u need a built-in unit

The magic value of the inline block for the display property is entered here. Basically, this is a way to make elements inline, but preserving their block capabilities, such as setting width and height, top and bottom margins and scrolling, etc.

CSS

 .holder { background-color: blue; padding: 10px; } .holder_under { padding-left: 10px; font-size: 16px; color: #999; } .holder_options { display:inline-block; } 

HTML

  <div class="holder"> <span class="holder_under">Left heading</span> <div class="holder_options"> <span class="holder_options_1">Option 1</span> </div> 

Answer 4

 .holder_options { float:right; } 

Here's JS Bin: http://jsbin.com/idilim/1/

Answer 5

Yes, the structure you laid out is not done yet, just float .holder_options to the left:

 .holder_options { float: left; } 

Answer 6

As Morpheus said in a comment, style="display: inline;" must do it.

 <div class="holder"> <span class="holder_under">Left heading</span> <div class="holder_options" style="display: inline;"> <span class="holder_options_1">Option 1</span> </div> </div>