CODEWITHSUNDEEP
css
user2083041
user2083041

Reputation: 513

Align span elements side by side

I have placed three span elements side by side inside a div. Third span element contains text i have added word-break css property so that if the text exceeds width the text breaks. Now how can i apply margin to the text which is in next line to align with above lines.

<div class="legend_data" style="line-height:18px;word-break:break-word">
  <span class="legend_text" style="float: left;">
    <input type="checkbox" value="test">
  </span>
  <span style="background-color:#32CD32;float: left;width: 12px;
   height: 12px;"></span>
  <span class="legend_text" style="margin-left: 1%;"> sample text  sample  text sample text sample text sample text sample text sample text sample text sample text sample text
  </span>
</div>

enter image description here

jsfiddle link

Upvotes: 1

Views: 8126

Answers (1)

Varinder
Varinder

Reputation: 2664

A bit of restructuring might get you on your way.

Firstly, move <span class="legend_text" style="float: left;">...</span> and <span style="background-color:#32CD32;float: left;width: 12px; height: 12px;"></span> in a separate container div and float it to the left, like below:

<div class="legend_data_controls">
    <input type="checkbox" value="test">
    <span class="legend_text_box"></span>
</div>

Then set overflow:hidden on parent element to clear floats

.legend_data {
    line-height: 18px;
    word-break: break-word;
    overflow: hidden;
}

And that should be it.

HTML:

<div class="legend_data">
    <div class="legend_data_controls">
        <input type="checkbox" value="test">
        <span class="legend_text_box"></span>
    </div>
    <div class="legend_data_content">
        <span> sample text  sample  text sample text sample text sample text sample text sample text sample text sample text sample text
        </span>
     </div>
</div>

CSS:

.legend_data {
    line-height: 18px;
    word-break: break-word;
    overflow: hidden;
}

.legend_data_controls {
    float: left;
}

.legend_data_controls input {
    vertical-align: middle;
    display: inline-block;
}

.legend_text_box {
    background-color:#32CD32;
    /*float: left;*/
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
}

.legend_data_content {
    margin-left: 50px;
}

Fiddle link

Hope that helps

Upvotes: 2

Related Questions