Can't get {display:inline} to work with JS and unordered list

[bradymc]

I've got a list of exercises that are shown underneath the muscle groups they are associated with. I have one Javascript function showing/hiding the exercises and another displaying the exercise description underneath the listing.

I want three columns shown and I don't want to use tables. So I attempted to use an unordered list and use {display:inline} to make the items appear from left to right. After fiddling with the code for a couple of hours, I've come here to beg for help! :)

Here's the simple CSS:
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
display: inline;
}

And here's the more complex JS and HTML:

<ul>
<li>
<a href="#" onclick="display('total_body');"><h5>Total Body</h5></a>
<div id='total_body'>
<a href="javascript:switchid('ball_squat_curl_press');">Ball Squat Curl Press</a><br />
<a href="javascript:switchid('lunge_curl_press');">Lunge Curl Press</a><br />
<a href="javascript:switchid('cable_squat_to_row');">Cable Squat To Row</a><br />
<br />
</div>
</li>
<li>
<a href="#" onclick="display('back_lats');"><h5>Back/Lats</h5></a>
<div id='back_lats'>
<a href="javascript:switchid('wide_grip_chin-ups');">Wide Grip Chin-ups</a><br />
<a href="javascript:switchid('medium_overhand_chin-ups');">Medium Overhand Chin-ups</a><br />
<a href="javascript:switchid('bent_rows');">Bent Rows</a><br />
<br />
</div>
</li>
</ul>


Each of these exercises has code that follows this general format:

<div id='ball_squat_curl_press' class="desc" style="display:none">
<h5>Ball Squat Curl Press</h5>
Description Description Description<br />
<br />
<img src="photos/ball_squat_curl_press1.jpg" alt="Ball Squat Curl Press" />
<img src="photos/ball_squat_curl_press2.jpg" alt="Ball Squat Curl Press" />
<img src="photos/ball_squat_curl_press3.jpg" alt="Ball Squat Curl Press" />
<img src="photos/ball_squat_curl_press4.jpg" alt="Ball Squat Curl Press" />
<img src="photos/ball_squat_curl_press5.jpg" alt="Ball Squat Curl Press" />
</div>


I'm not showing the actual JS code because it functions with or without me using a UL.

Am I trying to do something that's impossible?

[KDLA]

Try:

li {float: left;}

That'll stack your elements, and be more flexible. Inline styling has its limitations.

KDLA

[bradymc]

I tried floating it left and for some reason it didn't stop floating after the </li></ul>. It did accomplish what I wanted it to do... it just wouldn't stop accomplishing.

[KDLA]

For your next tag (whatever follows your navigation), add "clear: left;"
That should stop the floating.

[bradymc]

Ah yes. CLEAR! I should've known that, but thanks for taking my mind down memory lane.