CSS and indenting text by a checkbox.... How ???

Hi,

I have the attached code and I am finding that the "label" text is not indenting regardless of what I do.

I would like

Checkbox    Line1 some text 1dfdfd 3fdlklkb
                    Line2 some text dsgjihd sdgjhdf sd;gljhfdj

I am getting:

Checkbox    Line1 some text 1dfdfd 3fdlklkb
Line2 some text dsgjihd sdgjhdf sd;gljhfdj

So what can I do in CSS to ensure the correct indentation please.

Thanks in advance,

Sam

<span>
        <input id="CB1" type="checkbox" />
<label style=" ; border:solid 1px black" for="CB1">this is my test label ddsds dsadaads dsada dasddd dasadspor fdsfllkj dfsdsds test lable 1234 567890 12345 67890 1234567 8901 2345 67890</label>
        </span>

Open in new window

SamJollyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mahomeCommented:
I think the problem came because <label> is an inline element, so I changed to block and it worked. But I don't know if that's a good/clean solution:

<span>
    <input id="CB1" type="checkbox" style="float: left;"/>
    <label style="display: block; margin-left: 30px; border: solid 1px black" for="CB1">
        this is my test label ddsds dsadaads dsada dasddd dasadspor fdsfllkj dfsdsds test lable 1234 567890 12345 67890 1234567 8901 2345 67890
    </label>
</span>

Open in new window

0
SamJollyAuthor Commented:
mahome,

Yes this works.... However the label appears on a line below the checkbox so I had to put in some negative margin code, see below. Also I put in some margin-bottom to seperate the checkboxes. Not sure if this is the correct way of doing things?

span.checkText label
{
display: block;
margin-bottom:-10px;
margin-left: 30px;
margin-top:-18px

}

Thanks,

Sam
0
mahomeCommented:
Did you insert the float:left in the input-field. For me the it was after the floating on the same line. Can you post a bigger example with some checkboxes, then I can answer the other question.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

SamJollyAuthor Commented:
I am posting the code here, but it also includes another little issue that I have come across and that is the <a> and untagged text.

<span class="checkText"><input id="test" type="checkbox" name="" checked="checked" />
<label for="test">test</label></span>&nbsp;<a id="test" href="">[delete]</a>&nbsp;(Some extra text)

Unfortunately this is part of a legacy system that generates this codes automatically hence my preference for using CSS. As you can imagine the <a> and untagged text now get shifted left over the "Display:block" text. So any ideas on how to sort this without putting in extra tags which would mean changing the ASP.NET code.

Thanks,

Sam

P.s Yes I did forget to float left....!!!
0
mahomeCommented:
Without the possiblity to edit HTML, CSS is getting more and more complicated. But I understand your situation. But the following looks ugly, but it worked:
- that the rest doesn't go a line down, label has also to be floated, but with a defined width, so we can the appropriate margin-left for the ancher later. I didn't find a better solution, because it's difficult to handle untagged text
- because the float takes no height, this height has to be inserted via clear:both, but that only works with block-elements.

So this it what comes out:

<span class="checkText" style="clear: both; display: block;">
    <input id="test" type="checkbox" name="" checked="checked" style="float: left;"/>
    <label style="display: block; margin-left: 30px; float: left; width: 100px;" for="test">this is my test label ddsds dsadaads dsada dasddd dasadspor fdsfllkj dfsdsds test lable 1234 567890 12345 67890 1234567 8901 2345 67890</label>
</span>&nbsp;<a id="test" href="" style="margin-left: 140px;">[delete]</a>&nbsp;(Some extra text)
<span class="checkText" style="clear: both; display: block;">
    <input id="test" type="checkbox" name="" checked="checked" style="float: left;"/>
    <label style="display: block; margin-left: 30px; float: left; width: 100px;" for="test">short label</label>
</span>&nbsp;<a id="test" href="" style="margin-left: 140px;">[delete]</a>&nbsp;(Some extra text)

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SamJollyAuthor Commented:
Mahome,

Thanks for this. I think we have got as far as we can. I may need to look at the code to put in some extra spans etc.

Thanks for all of your timely help,

Sam
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.