Get 2 lists to appear underneath each other

I have the following code but for some reason the second list appears on the same line/section as the first.

I want these to appear underneath each other liek below

List 1
List 2

Currently I have

List 1 Lis

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
background-color: #000000;

.ulcalcconvert li
{float: left;
padding: 5px;}


<form id="form1" name="form1" method="post" action="">


<ul class="ulcalcconvert">
<li>Enter Value</li>
<li><input name="lengthValue" type="text" id="Text1" onclick="" /></li>
<li><select name="lengthUnit" class="calconfigselect">
<option value="">Select Unit</option>
<option value="millimeters">Millimetres</option>
<option value="inches">Inches</option>
<option value="meters">Meters</option>
<option value="feet">Feet</option>
<option value="yards">Yards</option>
<li><input type="button" name="button" value="Calculate" onclick="convertLength(form1.lengthUnit,form1.lengthValue,form1.inches,form1.millimeters,form1.meters,form1.feet,form1.yards);" class="googlesubmit" /></li>

<ul class="ulcalcconvert">

<ul class="ulcalcconvert">
<li><input name="millimeters" type="text" /></li>
<li><input name="inches" type="text" /></li>
<li><input name="meters" type="text" /></li>
<li><input name="yards" type="text" /></li>
<li><input name="feet" type="text" /></li>


thanks for nay help.

Try this:

.ulcalcconvert {
background-color: #000000;

Brilliant, thank you

You’re welcome. Glad it helped. :slight_smile: