CODEWITHSUNDEEP
htmlcss
starbucks
starbucks

Reputation: 3016

How to align a span and a div on the same line

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 do I make the div with the class holder_options align in the same line as the span with the class .holder_under?

Here's what it looks like currently in jsFiddle.

Upvotes: 5

Views: 16197

Answers (6)

iboros
iboros

Reputation: 337

As Morpheus stated in a comment, style="display: inline;" should 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>

Upvotes: 0

Matt Wohler
Matt Wohler

Reputation: 171

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

.holder_options {
    float: left;
}

Upvotes: 0

underscore
underscore

Reputation: 6877

u need inline-block

This is where the magic value inline-block for the display property comes into play. Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings 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>

Upvotes: 1

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102368

.holder_options
{
  float:right;
}

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

Upvotes: 0

dsgriffin
dsgriffin

Reputation: 68566

Div's are by default block level elements. Please read up more about block level elements here.

"Block level elements - Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content)."

Set it to display:inline-block;

.holder_options {
  display:inline-block;
}

Working jsFiddle here.

Upvotes: 12

Simon McLoughlin
Simon McLoughlin

Reputation: 8465

by default div's are display:block which is set to take 100% of the width. set it to display:inline or display:inline-block to take only what it needs and allow others to fit on the same line

Upvotes: 1

Related Questions