Question

Im iterating over a list to create fieldsets on the page. the last fieldset is at the bottom left and it looks crazy Is there something I can do to my layout to make these fieldSets look decent on the page?

html:

<table width="100%">
<tr>

    <td width="50%" align="center">

    </td>
 </tr>

 </table>

     <table class="data_table" width="100%">

  <tr>
        <th>
            <span onclick="toggleDiv('displayFields', 'displayImg')" style="cursor: hand;">Data Fields&nbsp;<img name="displayImg" src="../images/minus.gif" /></span>
        </th>

    </tr>

    <tr>
        <td>


            <div id="displayFields" style="display:block;">

                <c:forEach items="${detFieldMap}" var="detFieldEntry">     
                    <fieldset class="det">         
                        <legend>${detFieldEntry.key}</legend>  

                            <c:forEach items="${detFieldEntry.value}" var="detBean">            
                            <input type="checkbox" name="fieldNames" value="${detBean.fieldName}">${detBean.displayName}</input>            
                              </br>    
            </c:forEach>     
            </fieldset> 
            </c:forEach>

            </div>
            <tr>
            <td style="text-align: center;">
            <input type="button" name="clear_choice"  value="Check All" onclick="checkUncheck(true);"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" name="clear_choice"  value="Uncheck All" onclick="checkUncheck(false);"/>

            </td>
            </tr>

        </td>
        </tr>

</table>

CSS:

/*css. */
table.det
{
}

 table.det td
 {
 border: none;

 }
/* This groups small (16x16) icons using a border and a label. */
fieldset.det 
{     
display:block;
float:left;

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:20px;
border:2px solid #CCCCCC;

}
 fieldset.det legend
{
    padding:2px 5px;
    border:2px solid #CCCCCC;
    font-weight:  bold;


}

Answer 1

If you want to have all <fieldset>s in a single table row <td> next to each other in different table columns <td>s, then you should be putting each one in its own <td>. This way the table layout is maintained.

E.g.

<table class="data_table" width="100%">
    <tr>
        <th colspan="${fn:length(detFieldMap)}">
            <span onclick="toggleDiv('displayFields', 'displayImg')" style="cursor: hand;">Data Fields&nbsp;<img name="displayImg" src="../images/minus.gif" /></span>
        </th>
    </tr>
    <tr id="displayFields">
        <c:forEach items="${detFieldMap}" var="detFieldEntry">     
            <td>
                <fieldset class="det">         
                    <legend>${detFieldEntry.key}</legend>  
                    <c:forEach items="${detFieldEntry.value}" var="detBean">            
                        <input type="checkbox" name="fieldNames" value="${detBean.fieldName}">${detBean.displayName}</input>            
                        </br>    
                    </c:forEach>     
                </fieldset> 
            </td>
        </c:forEach>
    </tr>
    <tr>
        <td colspan="${fn:length(detFieldMap)}" style="text-align: center;">
            <input type="button" name="clear_choice"  value="Check All" onclick="checkUncheck(true);"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" name="clear_choice"  value="Uncheck All" onclick="checkUncheck(false);"/>
        </td>
    </tr>
</table>

Note that I also fixed your invalid HTML of nesting a <tr> as direct child of a <td>. Use http://validator.w3.org to nail down HTML syntax errors yourself.