ansaurus

Question

Answer 1

A:

Try the following. You'll have to add your other two divs back in, and I'm assuming you toggle their visibility based on selection.

<div  style="width: 880px; padding-top: 2px; border-bottom: none; 
        height: 28px;"> 

        <div style="float:left">
         <asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label> 

              <asp:DropDownList ID="ddlFilter" runat="server" Width="221px"> 
            <asp:ListItem Text="Select..." Value=""></asp:ListItem> 
            <asp:ListItem Text="Date" Value="DATE"></asp:ListItem> 
            <asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem> 
            <asp:ListItem Text="Status" Value="STATUS"></asp:ListItem> 
        </asp:DropDownList>              
        </div>



<div id="divStatusSearch"> 
    <div style="float: left"> 
        <asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label> 
        <asp:DropDownList ID="ddStatus" runat="server" Width="152px" > 
        </asp:DropDownList> 
    </div> 
</div> 
<div style="float:left">
        <asp:Button ID="btnSearch" Text="Search" runat="server" />  

</div>

MCain 2010-07-23 21:15:38

it did not work, the div_date is just moved from left to right but still not align like how i wanted.

Abu Hamzah 2010-07-23 21:21:40

Answer 2

A:

Sure, not a problem. You can clean up your markup a bit on the div's that appear by removing the nested <div style="float: left">. The CSS would be as follows:

select {
    float: left;
}

#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
    float: left;
    margin-left: 20px; /* put some space between the elements */
}

The above assumes that you're creating and destroying the respected <div>'s as you hide and show them. If you need them to all exist in the source and you'll show and hide them, you'll need something like the following:

#divHolder {
    position: relative;
    float: left; 
    width: 200px; /* adjust as needed */
}

#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
    position: absolute;
    top: 0;
    left: 0;        
}

And the HTML:

<div id="divHolder">
    <!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />

Pat 2010-07-23 21:17:28

Pat, you are correct, i am displaying div based on the selection from dropdownlist, i have tried your solution but does not work, i have tried your first solution which select {float: left}

Abu Hamzah 2010-07-23 21:29:43

Take a look at this jsfiddle: http://jsfiddle.net/xvQwx/ If you notice, the status and date filters are overlaying each other. All you'd have to do in this example is code the Javascript that shows/hides the correct one based on the filter dropdown. If the layout isn't working with float in your code, check that the elements aren't wider than their floated containers as this will cause a float drop and break the layout.

Pat 2010-07-23 22:29:59

very strange that, if i removed border: 1px solid red ; and border: 1px solid blue ; than everything is overlaying each other and if i put it back everything look good. do you know what might be the problem, i have updated the question.

Abu Hamzah 2010-07-24 02:03:45

ansaurus

tags:

views:

answers:

Help with aligning the controls

related questions