Question

I have a list of form fields contained within ul and li structure. I have simplified my markup to focus on a problem I have.

Here’s the markup:

<ul>
<li class="multiplechoice">
   <fieldset>
     <legend>my label</legend>
     <div class="description">My description</div>

          <ul>        
            <li>
              <button value="asdf" readonly="readonly"></button>
              <label>test12</label>
             </li>
             <li>
               <button value="0" readonly="readonly"></button>
               <label for="test23">test23</label> </li>
           </ul>

    </fieldset>
</li>
</ul>

And the CSS I have so far:

legend{
    float: left;
    width: 80px;
    margin-right: 20px;
}

.description{
    clear: both;
    float: left;
    width: 80px;
    margin-right: 20px;
}

ul{
    float: left;
}

Note: The div with the class description can either not exist, contain no text inside or contain text.

What I wish to do is to have the legend and the description both floated to the left. The description should be underneath the legend. The ul containing the buttons should be seperated by a margin from those floated items, be aligned to the top of the first float and aligned vertically.

Here’s a picture showing the current state of things:

I have been trying all sorts of floats and positioning, but can’t seem to get there. Can anyone advice as to how the desired result can be achieved?

I am looking for a CSS only solution, preferably no javascript please 🙂

Fiddle: http://jsfiddle.net/eHEcJ/

Answer 1

I ended up just getting rid of the float on the ul and making it an inline-block:

legend{
    float: left;
    width: 80px;
    margin-right: 20px;
}

.description{
    clear: both;
    float: left;
    width: 80px;
    margin-right: 20px;
}

ul{
    display: inline-block;
}

And the fiddle: http://jsfiddle.net/BU57V/