CODEWITHSUNDEEP
htmlcss
Tiny
Tiny

Reputation: 27899

HTML CheckBox labels within a container are not displayed as expected

The following HTML code attempts to display checkboxes inside a <div></div> container.

<div style="overflow: auto; width: auto; display:block; max-height:130px; max-width:200px; background-color: #FFF; height: auto; border: 1px double #336699; padding-left: 2px;">
    
    <label for="chk12" style='white-space: nowrap;'>
        <input type='checkbox' id="chk12" name='chk_colours' value="12" class='validate[required] text-input text'>
        <div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp;</div>
    </label>    
        
    <label for="chk11" style='white-space: nowrap;'>
        <input type='checkbox' id="chk11" name='chk_colours' value="11" class='validate[required] text-input text'>
        <div style='background-color:#D9D919; width: 180px;' title="brightgold">&nbsp;&nbsp;</div>
    </label>
    
    <label for="chk10" style='white-space: nowrap;'>
        <input type='checkbox' id="chk10" name='chk_colours' value="10" class='validate[required] text-input text'>
        <div style='background-color:#76EE00; width: 180px;' title="chartreuse2">&nbsp;&nbsp;</div>
    </label>
    
    <label for="chk9" style='white-space: nowrap;'>
        <input type='checkbox' id="chk9" name='chk_colours' value="9" class='validate[required] text-input text'>
        <div style='background-color:#2E0854; width: 180px;' title="indigo">&nbsp;&nbsp;</div>
    </label>
    
    <label for="chk8" style='white-space: nowrap;'>
        <input type='checkbox' id="chk8" name='chk_colours' value="8" class='validate[required] text-input text'>
        <div style='background-color:#292929; width: 180px;' title="gray16">&nbsp;&nbsp;</div>
    </label>                    
</div>

What it displays can be visible in the following snap shot.

enter image description here

It is seen that various colour stripes which are displayed using the following <div> tag

<div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp</div>

are displayed below their respective checkboxes which are expected to be displayed in a straight line even though I'm using the white-space: nowrap; style attribute.

How to display each stripe along with its respective checkbox in a straight line?

It was explained in one of my questions itself but in that question each checkbox had a text label in place of such colour stripes. Here it is. I tried to do as mentioned in the accepted answer of that question but to no avail in this case.

Upvotes: 0

Views: 1732

Answers (3)

Sajjan Sarkar
Sajjan Sarkar

Reputation: 4198

Here you go :)

http://jsfiddle.net/Uaq85/

<div style="overflow: auto; width: auto; display:block; max-height:130px; max-width:200px; background-color: #FFF; height: auto; border: 1px double #336699; padding-left: 2px;">

    <label for="chk12" style='white-space: nowrap;'>
        <input type='checkbox' id="chk12" name='chk_colours' value="12" class='validate[required] text-input text'>
        <div style='background-color:#FF8C00; width: 180px;display:inline-block;' title="darkorange">&nbsp;&nbsp;</div>
    </label>    

    <label for="chk11" style='white-space: nowrap;'>
        <input type='checkbox' id="chk11" name='chk_colours' value="11" class='validate[required] text-input text'>
        <div style='background-color:#D9D919; width: 180px;display:inline-block;' title="brightgold">&nbsp;&nbsp;</div>
    </label>

    <label for="chk10" style='white-space: nowrap;'>
        <input type='checkbox' id="chk10" name='chk_colours' value="10" class='validate[required] text-input text'>
        <div style='background-color:#76EE00; width: 180px;display:inline-block;' title="chartreuse2">&nbsp;&nbsp;</div>
    </label>

    <label for="chk9" style='white-space: nowrap;'>
        <input type='checkbox' id="chk9" name='chk_colours' value="9" class='validate[required] text-input text'>
        <div style='background-color:#2E0854; width: 180px;display:inline-block;' title="indigo">&nbsp;&nbsp;</div>
    </label>

    <label for="chk8" style='white-space: nowrap;'>
        <input type='checkbox' id="chk8" name='chk_colours' value="8" class='validate[required] text-input text'>
        <div style='background-color:#292929; width: 180px;display:inline-block;' title="gray16">&nbsp;&nbsp;</div>
    </label>                    
</div>

Upvotes: 1

Koen.
Koen.

Reputation: 26949

Don't use <div>s, they're block-elements and that caused them to be not aligned with the checkboxes. Try using <span>s instead

EDIT

Or add float:right to the CSS of the colored <div>s

EDIT 2

using a little CSS:

label div{
   display: inline-block;
}

​ Example here: http://jsfiddle.net/koenpunt/Ca22j/

Upvotes: 2

feeela
feeela

Reputation: 29932

You have used DIV to mark up the label. TheDIV is presented as block element by default. Just set it to display: inline; or display: inline-block;. Or use another element– such as SPAN.

Upvotes: 3

Related Questions