Question

My issue is that I have two dropdown boxes that I need to align. In Firefox, it works fine. Basically, one form box for country, and then underneath it, another form box for state. In IE, these boxes show up next to one another. I’m trying to style it so that the second form box appears underneath the first.

My HTML code (I chopped off some states so it’d be easier to read):

<div class="label">*Country:</div>
<div class="field">
  <asp:DropDownList ID="country" CssClass="country2" runat="server"></asp:DropDownList>    
</div>
<div class="label"></div>
<div class="field">
  <asp:DropDownList ID="us_states" runat="server" CssClass="us_state_dropdown2">
    <asp:ListItem>-Select State-</asp:ListItem>
    <asp:ListItem>Alabama</asp:ListItem>
    <asp:ListItem>Alaska</asp:ListItem>
    <asp:ListItem>Arizona</asp:ListItem>
  </asp:DropDownList>
</div>

My CSS code for classes “label”, “field”, “country2”, and “us_state_dropdown2”:

.label {width: 195px !important; height: 28px; }
.field {width: auto !important;}
.country2 { width:212px !important;}
.us_state_dropdown2 { width:212px !important;}

Any ideas?

Answer 1

You can use clear to avoid elements from being positioned on the side(s) that you choose.
Read the CSS reference to learn how to use clear. MDN Reference