Buzzard72 Buzzard72 - 5 months ago 15
CSS Question

html dropdown messes up html unordered list columns

I'm creating a 3 column layout of mostly input fields with a single dropdown (html-select). I am using float:left with a width of 33% to arrange all the controls in an unordered list so that they form 3 columns per row. This all works except when the dropdown is the last control on the row. If it is, it messes up the next control by aligning it incorrectly underneath it. This only happens when the dropdown is the last control on the line (every 3 in my case since I am dividing widths in 33% amounts).

So in this example, the Tax ID ends up under the Valid dropdown instead of floating all the way to the left. I've tested in several browsers and several versions so it must be something simple I am messing up. How do I fix this?

<style type="text/css">
ul.form
{
list-style: none;
}

ul.form li
{
display: block;
float: left;
width: 33%;
padding-top: 15px;
}

ul.form li label.ctrlLbl
{
font-weight: bold;
display: block;
font-size: .85em;
}

ul.form li input
{
width: 180px;
}
</style>



<UL class="form">

<LI>
<LABEL class="ctrlLbl" >NAME</LABEL> <INPUT />
</LI>

<LI >
<LABEL class="ctrlLbl" >ID</LABEL> <INPUT />
</LI>

<LI >
<LABEL class="ctrlLbl" >VALID?</LABEL>
<SELECT>
<OPTION value="0">-- Make a Selection --</OPTION>
<OPTION value="Y">Y</OPTION>
<OPTION value="N">N</OPTION>
</SELECT>
</LI>

<LI >
<LABEL class="ctrlLbl" >TAX ID</LABEL> <INPUT />
</LI>

<LI >
<LABEL class="ctrlLbl" >CITY</LABEL> <INPUT />
</LI>

<LI >
<LABEL class="ctrlLbl" >STATE</LABEL> <INPUT />
</LI>

<LI >
<LABEL class="ctrlLbl" >COUNTRY</LABEL> <INPUT />
</LI>

</UL>

Answer

Adding a height to the li's and the missing width to the select tag seems to have solved the problem, my guess is the height on the select element was more/less than the others, even if it's by one pixel and that's why instead of being pushed to the left, it stayed on the same column. https://jsfiddle.net/fngy8uvn/2/

    ul.form {
    list-style: none;
}
ul.form li {
    display: block;
    float: left;
    width: 33%;
    padding-top: 15px;
    // new value
    height: 50px;
}
ul.form li label.ctrlLbl {
    font-weight: bold;
    display: block;
    font-size: .85em;
}
// new property
ul.form li input, ul.form li select {
    width: 180px;
}

Also, may I recommend using a responsive framework such as bootstrap? It makes this so much simpler... https://jsfiddle.net/mzjcu8oc/

<UL class="form">
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">NAME</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">ID</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">VALID?</LABEL>
        <SELECT>
            <OPTION value="0">-- Make a Selection --</OPTION>
            <OPTION value="Y">Y</OPTION>
            <OPTION value="N">N</OPTION>
        </SELECT>
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">TAX ID</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">CITY</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">STATE</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">COUNTRY</LABEL>
        <INPUT />
    </LI>
</UL>

ul.form {
    list-style: none;
}
ul.form li {
    height: 50px;
}
ul.form li label.ctrlLbl {
    display: block;
}
ul.form li input, ul.form li select {
    width: 100%;
}