Question

I’m trying to get the jquery accordion work properly under another div/table that is set to float:right next to another table that is with float:left.

Whenever I do that, the whole length of the h3’s and the content just goes out of line.

I have also tried using the ‘fill space’ feature, didn’t help at all.

Have anyone ever used the accordion affect with float?

Thanks,

<script> 
$(function() {
    $( "#accordion" ).accordion();
});
</script> 

<table border="0" cellpadding="0" cellspacing="0" style="width:380px;float:left;">
<tr><td>some text</td><td>some more text</td></tr>
<tr>some text</td><td>some more text</td></tr>
</table>

            <div id="attendance_accordion" style="float:right;width:350px;"> 
                <h3><a href="#">Section 1</a></h3> 
                <div> 
                    <p> 
                        Section 1 text
                    </p> 
                </div> 
                <h3><a href="#">Section 2</a></h3> 
                <div> 
                    <p> 
                    Section 2 text
                    </p> 
                </div> 
                <h3><a href="#">Section 3</a></h3> 
                <div> 
                    <p> 
                    Section 3 text
                    </p> 
                </div>      
            </div> 

Answer 1

If you could please post your mark-up and your css so that we can see how it’s done.

As a quick assessment, when you have floating element, make sure you use “clear:both” after all the floating element. You could put this "<div style="clear:both">" at the end.