Solved

two divs floated right - but in wrong order

Posted on 2013-01-16
4
575 Views
Last Modified: 2013-01-16
I have two divs that are floated right, but they are in the wrong order against the right edge of the parent div:

both float right
How can I ... "switch" them around?

I know the rules that govern floating are complex, so I appreciate any help you can give me.


Here is my current markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Preservation.ascx.cs"
    Inherits="Reo.ContentControls.Preservation" %>
<%@ Register Src="AssetFrameNavigation.ascx" TagName="AssetFrameNavigation" TagPrefix="uc2" %>
<%@ Register Assembly="Framework" Namespace="Framework.UIControls" TagPrefix="cc1" %>
<%@ Register TagPrefix="uc1" TagName="DateCalender" Src="~/Controls/DateCalendar.ascx" %>



<script type="text/javascript" src="../Scripts/jQueryDatePicker/jquery-ui-1.8.5.custom.min.js"></script>

<script type="text/javascript">


    $(document).ready(function () {

        $('div[id*="divserviceslabel"]').css('position', 'relative');
        $('div[id*="divserviceslabel"]').css('float', 'right');
    //    $('div[id*="divserviceslabel"]').css('clear', 'left');
        $('div[id*="divserviceslabel"]').css('font-size', '12px');
        $('div[id*="divserviceslabel"]').css('font-weight', 'bold');
        $('div[id*="divserviceslabel"]').css('color', '#7a3100');
        $('div[id*="divserviceslabel"]').css('margin-right', '200px');
        $('div[id*="divserviceslabel"]').css('border', 'thin green solid');

        $('div[id*="divservicestotal"]').css('position', 'relative');
        $('div[id*="divservicestotal"]').css('float', 'right');
        //$('div[id*="divservicestotal"]').css('clear', 'both');
        $('div[id*="divservicestotal"]').css('font-size', '12px');
        $('div[id*="divservicestotal"]').css('font-weight', 'bold');
        $('div[id*="divservicestotal"]').css('color', 'black');
      //  $('div[id*="divservicestotal"]').css('margin-right', '100px');
        $('div[id*="divservicestotal"]').css('border', 'thin brown solid');

       


       


        $('div[id*="divrepairlabel"]').css('position', 'relative');
        $('div[id*="divrepairlabel"]').css('float', 'right');
        $('div[id*="divrepairlabel"]').css('clear', 'both');
        $('div[id*="divrepairlabel"]').css('font-size', '12px');
        $('div[id*="divrepairlabel"]').css('font-weight', 'bold');
        $('div[id*="divrepairlabel"]').css('color', '#7a3100');
        $('div[id*="divrepairlabel"]').css('margin-right', '100px');
        $('div[id*="divrepairlabel"]').css('margin-top', '30px');
        $('div[id*="divrepairlabel"]').css('border', 'thin blue solid');


        $('div[id*="divrepairtotal"]').css('position', 'relative');
        $('div[id*="divrepairtotal"]').css('float', 'right');
        $('div[id*="divrepairtotal"]').css('clear', 'both');
        $('div[id*="divrepairtotal"]').css('font-size', '12px');
        $('div[id*="divrepairtotal"]').css('font-weight', 'bold');
        $('div[id*="divrepairtotal"]').css('color', 'black');
        $('div[id*="divrepairtotal"]').css('margin-right', '100px');
        $('div[id*="divrepairtotal"]').css('margin-top', '30px');
        $('div[id*="divrepairtotal"]').css('border', 'thin yellow solid');

    });

     

     		
    </script>


<div id="frame">
    <div id="frame_header">
        <uc2:AssetFrameNavigation ID="AssetFrameNavigation1" runat="server" />
        <!-- This is the frame main navigation tabs -->
        <div id="frame_title">
            <h1>
                Property Preservation</h1>
            <!-- Page tile -->
        </div>
        <div id="frame_header_secondary_Navigation" class="shown">
            <!-- This area is for the secondary navigation -->
            <!-- This is a sample navigation -->
            <!-- END of sample navigation -->
        </div>
    </div>
    <div id="corpus">
        <!-- This is where the content of each page should go -->
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="frame_content_tab_area">
                    <div class="frame_content_tabs">
                        <ul id="tabList" runat="server">
                        </ul>
                    </div>
                    <table>
                        <tr>
                            <td>
                                <label>
                                    Property Preservation Services Vendor:</label>
                            </td>
                            <td>
                                <asp:Label ID="lblPropPresVendor" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>
                                    Order Date:</label>
                            </td>
                            <td>
                                <asp:Label ID="lblPropPresOrderDt" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>
                                    Cancel Date:</label>
                            </td>
                            <td>
                                <asp:Label ID="lblPropPresCancelDt" runat="server"></asp:Label>
                            </td>
                        </tr>
                    </table>
                    <h6>
                        Services</h6>
                    <div id="divServices" runat="server">
                        <cc1:GridviewFormatted ID="gvPreservation" runat="server" AllowSorting="False" AllowPaging="False"
                            PageSize="10" AutoGenerateColumns="false" DataSourceID="PreservationDataSource"
                            OnRowDataBound="gvPreservation_RowDataBound" CssClass="grid_view">
                            <Columns>
                                <asp:TemplateField HeaderText="Service" SortExpression="Preservation_Service">
                                    <ItemTemplate>
                                        <asp:HyperLink ID="lnkService" runat="server" Text='<%# Eval("Preservation_Service") %>'
                                            Target="_blank"></asp:HyperLink>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Bid Status" SortExpression="Preservation_Status">
                                    <ItemTemplate>
                                        <asp:Label ID="lblPreservation_Status" runat="server" Text='<%# Eval("Preservation_Status") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="OrderDt" SortExpression="OrderDt">
                                    <ItemTemplate>
                                        <asp:Label ID="lblOrderDt" runat="server" Text='<%# Eval("OrderDt","{0:d}") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="CompletedDt" SortExpression="CompletedDt">
                                    <ItemTemplate>
                                        <asp:Label ID="lblCompletedDt" runat="server" Text='<%# Eval("CompletedDt") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Provider" SortExpression="Provider">
                                    <ItemTemplate>
                                        <asp:Label ID="lblProvider" runat="server" Text='<%# Eval("Provider") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Bid Amount" SortExpression="BidAmt">
                                    <ItemTemplate>
                                        <asp:Label ID="lblBidAmt" runat="server" Text='<%# Eval("BidAmt") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </cc1:GridviewFormatted>                        
                        <div id="divserviceslabel" runat="server">Total Approved Preservation Bids:  </div><div id="divservicestotal" runat="server"></div>
                        <asp:LinqDataSource ID="PreservationDataSource" OnSelecting="PreservationDataSource_Selecting"
                            runat="server">
                        </asp:LinqDataSource>
                    </div>
                    <h6>
                        Utilities</h6>
                    <div id="divUtilities" runat="server">
                        <cc1:GridviewFormatted ID="gvUtilities" runat="server" AllowSorting="True" AllowPaging="False"
                            PageSize="10" AutoGenerateColumns="false" DataSourceID="UtilDataSource" OnRowDataBound="gvUtilities_RowDataBound"
                            CssClass="grid_view">
                            <Columns>
                                <asp:TemplateField HeaderText="Utilities" SortExpression="Utility">
                                    <ItemTemplate>
                                        <asp:HyperLink ID="lnkUtility" runat="server" Text='<%# Eval("Utility") %>' rel="shadowbox"></asp:HyperLink>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Transfer Date" SortExpression="TransferDt">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTransferDt" runat="server" Text='<%# Eval("TransferDt") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Turned On" SortExpression="TurnedOn_Descript">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTurnedOn_Descript" runat="server" Text='<%# Eval("TurnedOn_Descript") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Turned On Date" SortExpression="TurnedOnDt">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTurnedOnDt" runat="server" Text='<%# Eval("TurnedOnDt") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Turned Off Date" SortExpression="TurnedOffDt">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTurnedOffDt" runat="server" Text='<%# Eval("TurnedOffDt") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </cc1:GridviewFormatted>
                        <asp:LinqDataSource ID="UtilDataSource" OnSelecting="UtilDataSource_Selecting" runat="server">
                        </asp:LinqDataSource>
                    </div>
                    <h6>
                        Repairs</h6>
                    <div id="divFormList" runat="server">                   
                    </div>                    
                      <div id="divrepairlabel" runat="server">Total Approved Repair Bids:  </div><div id="divrepairtotal" runat="server"></div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                <div class="loading_image" id="loading_image" runat="server">
                    Please Wait...</div>
            </ProgressTemplate>
        </asp:UpdateProgress>         
    </div>
    <div id="footer">
    </div>
</div>
<div id="end_cap">
</div>

Open in new window

0
Comment
Question by:knowlton
4 Comments
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 50 total points
ID: 38783680
Just switch them around in your markup. Simple, painless and quick.
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 50 total points
ID: 38783688
or throw them in a container, and float the container instead.
0
 
LVL 41

Accepted Solution

by:
guru_sami earned 400 total points
ID: 38783739
Try this:
1: Add divs inside another div and float it right:

<div style="float:right;">
        <div id="divserviceslabel" runat="server">Total Approved Preservation Bids:</div>
        <div id="divservicestotal" runat="server">$600.00</div>
    </div>

Open in new window


2: and make the divs float left:
 $('div[id*="divserviceslabel"]').css('float', 'left');
 $('div[id*="divservicestotal"]').css('float', 'left');

Open in new window

0
 
LVL 5

Author Closing Comment

by:knowlton
ID: 38783757
All good solutions.  I went with guru sami's recommendation.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now