treat radio's [form item] as list items

Hi there,

Im trying to lay out a form using CSS and not one single table, so far so good, but i've snaged a issue that I can't seem to overcome...

I want to have my radio buttons and check boxes layed out in the following format:

<> Some text which          <> Some more text that
      runs over two lines            runs over two lines

<> Some text which          <> Some more text that
      runs over two lines            runs over two lines
                                             and so on.

<> Some text which          <> Some more text that
      runs over two lines            runs over two lines

Now, i've almost got there, only whats happening is, the check box or radio button is being pushed into the text... i.e.

      <> Some text which          <> Some more text
      runs over two lines            that runs over two lines

which is mega ugly....

my code is this:

      <div id="cms_parent_content">
            <label>Username</label>
            <div class="group">
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Username and password</label>
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Some mass of text</label>
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Some mass of text</label>
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Username and my name</label>
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Username and my name and password</label>
            </div>
      </div>

with CSS of :

#cms_parent_content .group
      {
            display: block;
            float: left;
            width: 300px;
            padding: 10px;
            border: 1px dashed #ccc;
            margin: 0px 0px 15px 0px;
            background-color:#fff;
      }

#cms_parent_content .group label
      {
            display:block;
            float:left;
            width:120px;
            padding:0px 10px 5px 10px;
            text-align:left;
      }

Does anyone know what I need to change to get it to work more like a list? and less like a box?

Cheers
LVL 3
d2kagwAsked:
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.

VirusMinusCommented:
You can try this ->

Cross-browser support is a little buggy, but, you could  use the adjacent sibling selector (x + y), which is applied to the first y element following an x element.  So, in ur CSS you would have something like:

input.radio + p.formlabel  { clear: both; text-align: right;...}

this would cause the first p with a class of formlabel that follows an input who's class is radio to have those styles:

<input class="radio" type="radio" value="foo">Bar</input>
<p>next radio button label</p><input class="radio"...

The other way I've seen this done is by arantius -> http://www.arantius.com/ee/Q_21156883.html (but its using tables)
0
VirusMinusCommented:
this seems to work as well ->

<input style="float: left;" type="radio" name="as" id="as"><label style="float: left; for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
<input style="float: left;" type="radio" name="as" id="as"><label style="float: left; for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
<input style="float: left;" type="radio" name="as" id="as"><label style="float: left; for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
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
VirusMinusCommented:
yup definitely the second one..

just but a <br style="clear:both;" /> after your first row and start again..
0
d2kagwAuthor Commented:
Sweet Guys,

that works a treat, however, when I put it into the CSS file, rather than keeping it in the XHTML, it doesn't work correctly, the second column's label acts as though there is a line break before the first word....

XHTML:
            <div class="group">
                  <input class="columnItem" type="checkbox" name="as" id="as"><label class="columnItem" for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
                  <input class="columnItem" type="checkbox" name="as" id="as"><label class="columnItem" for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
                  <input class="columnItem" type="checkbox" name="as" id="as"><label class="columnItem" for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
            </div>

CSS:
            #cms_parent_content .group
                  {
                        display: block;
                        float: left;
                        width: 300px;
                        padding: 10px;
                        border: 1px dashed #ccc;
                        margin: 0px 0px 15px 0px;
                        background-color:#fff;
                  }
            
            #cms_parent_content .group .columnItem
                  {
                        float: left;
                        text-align: left;
                        margin-right: 10px;
                        margin-top: 10px;
                  }
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.