float: right not working [modified]
-
<div style="width: 380px;"> <div style="float: right;"> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnTop" runat="server" Text="Top" CssClass="Button" Width="75px" /> </div> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnUp" runat="server" Text="Up" CssClass="Button" Width="75px" /> </div> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnDown" runat="server" Text="Down" CssClass="Button" Width="75px" /> </div> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnBottom" runat="server" Text="Bottom" CssClass="Button" Width="75px" /> </div> </div> <asp:ListBox ID="lbItems" runat="server" Rows="10" Width="300px" Height="166px"></asp:ListBox> </div>
I have the above code in an aspx page, but the div with float right appears above the listbox rather than to its right. If I remove the heights from the divs with buttons in them then the buttons appear to the right of hte list box, but they are all bunched together. I could easily acheive what I want here with a table, but I'm trying to make an all CSS page. Basically I want CSS for this table:<table> <tr> <td rowspan="4"></td> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
-- modified at 11:01 Tuesday 11th July, 2006 -
<div style="width: 380px;"> <div style="float: right;"> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnTop" runat="server" Text="Top" CssClass="Button" Width="75px" /> </div> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnUp" runat="server" Text="Up" CssClass="Button" Width="75px" /> </div> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnDown" runat="server" Text="Down" CssClass="Button" Width="75px" /> </div> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnBottom" runat="server" Text="Bottom" CssClass="Button" Width="75px" /> </div> </div> <asp:ListBox ID="lbItems" runat="server" Rows="10" Width="300px" Height="166px"></asp:ListBox> </div>
I have the above code in an aspx page, but the div with float right appears above the listbox rather than to its right. If I remove the heights from the divs with buttons in them then the buttons appear to the right of hte list box, but they are all bunched together. I could easily acheive what I want here with a table, but I'm trying to make an all CSS page. Basically I want CSS for this table:<table> <tr> <td rowspan="4"></td> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
-- modified at 11:01 Tuesday 11th July, 2006 -
<div style="width: 380px;"> <div style="float: right;"> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnTop" runat="server" Text="Top" CssClass="Button" Width="75px" /> </div> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnUp" runat="server" Text="Up" CssClass="Button" Width="75px" /> </div> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnDown" runat="server" Text="Down" CssClass="Button" Width="75px" /> </div> <div style="height: 40px; vertical-align: middle;"> <asp:Button ID="btnBottom" runat="server" Text="Bottom" CssClass="Button" Width="75px" /> </div> </div> <asp:ListBox ID="lbItems" runat="server" Rows="10" Width="300px" Height="166px"></asp:ListBox> </div>
I have the above code in an aspx page, but the div with float right appears above the listbox rather than to its right. If I remove the heights from the divs with buttons in them then the buttons appear to the right of hte list box, but they are all bunched together. I could easily acheive what I want here with a table, but I'm trying to make an all CSS page. Basically I want CSS for this table:<table> <tr> <td rowspan="4"></td> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
-- modified at 11:01 Tuesday 11th July, 2006You shouldn't need to have a div around every button. That is extra markup and as you can see is actually using more markup than the table. Try something that will end up looking like this: CSS Float Test .btnlist {float:right;width:25%;background-color:#0FF;} .btnlist li {height:40px; list-style:none;}
-
list box item here
-
list box item here
-
list box item here
-
list box item here
-
list box item here
-Dirk
-