Results 1 to 3 of 3

Thread: Floating objects problem

  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Floating objects problem

    Hi,

    I have a large div with has an asp image to the left and then I have several objects I want to float to the right of it. In floating everything left after the photo the first line of objects works but the second continues to float from the last object. I have attached a image to explain more.

    Cheers,

    Jiggy
    Attached Images Attached Images  

  2. #2
    Frenzied Member MattP's Avatar
    Join Date
    Dec 2008
    Location
    WY
    Posts
    1,227

    Re: Floating objects problem

    Can you post the div and css you're using?
    This pattern in common to all great programmers I know: they're not experts in something as much as experts in becoming experts in something.

    The best programming advice I ever got was to spend my entire career becoming educable. And I suggest you do the same.

  3. #3

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Re: Floating objects problem

    Yes of course:-

    <div id="divPhoto" runat="server" class="divPhoto">
    <div id="divPhotoContainer" runat="server" class="divPhotoContainer">
    <asp:ImageButton ID="imgPhoto" runat="server" cssclass="imgPhoto"/>
    </div>
    <asp:ImageButton ID="imgLeft1" runat="server" CssClass="imgLeft" ImageUrl="~/Images/back.png" />
    <div id="divFixedPointer1" runat="server" class="divFixedPointer1" style="background-image:url('Pointers/Blob-1 Circle.gif'); background-repeat: no-repeat;"></div>
    <div id="divPointer1" runat="server" class="divPointer" style="background-image:url('Pointers/Blob-1%20W.gif'); background-repeat: no-repeat;"></div>
    <asp:ImageButton ID="imgRight1" runat="server" CssClass="imgRight" ImageUrl="~/Images/forward.png" />
    <asp:TextBox ID="txtKPI1" runat="server" CssClass="txtKPI"></asp:TextBox>
    <asp:ImageButton ID="imgLeft2" runat="server" CssClass="imgClearLeft" ImageUrl="~/Images/back.png" />
    <div id="divFixedPointer2" runat="server" class="divFixedPointer2" style="background-image:url('Pointers/Blob-2 Circle.gif'); background-repeat: no-repeat;"></div>
    <div id="divPointer2" runat="server" class="divPointer" style="background-image:url('Pointers/Blob-2%20W.gif'); background-repeat: no-repeat;"></div>
    <asp:ImageButton ID="imgRight2" runat="server" CssClass="imgRight" ImageUrl="~/Images/forward.png" />
    <asp:TextBox ID="txtKPI2" runat="server" CssClass="txtKPI"></asp:TextBox>
    <asp:ImageButton ID="imgLeft3" runat="server" CssClass="imgLeft" ImageUrl="~/Images/back.png" />
    <div id="divFixedPointer3" runat="server" class="divFixedPointer3" style="background-image:url('Pointers/Blob-3 Circle.gif'); background-repeat: no-repeat;"></div>
    <div id="divPointer3" runat="server" class="divPointer" style="background-image:url('Pointers/Blob-3%20W.gif'); background-repeat: no-repeat;"></div>
    <asp:ImageButton ID="imgRight3" runat="server" CssClass="imgRight" ImageUrl="~/Images/forward.png" />
    <asp:TextBox ID="txtKPI3" runat="server" CssClass="txtKPI"></asp:TextBox>
    <asp:ImageButton ID="imgLeft4" runat="server" CssClass="imgLeft" ImageUrl="~/Images/back.png" />
    <div id="divFixedPointer4" runat="server" class="divFixedPointer4" style="background-image:url('Pointers/Blob-4 Circle.gif'); background-repeat: no-repeat;"></div>
    <div id="divPointer4" runat="server" class="divPointer" style="background-image:url('Pointers/Blob-4%20W.gif'); background-repeat: no-repeat;"></div>
    <asp:ImageButton ID="imgRight4" runat="server" CssClass="imgRight" ImageUrl="~/Images/forward.png" />
    <asp:TextBox ID="txtKPI4" runat="server" CssClass="txtKPI"></asp:TextBox>
    <asp:ImageButton ID="imgLeft5" runat="server" CssClass="imgLeft" ImageUrl="~/Images/back.png" />
    <div id="divFixedPointer5" runat="server" class="divFixedPointer5" style="background-image:url('Pointers/Blob-5 Circle.gif'); background-repeat: no-repeat;"></div>
    <div id="divPointer5" runat="server" class="divPointer" style="background-image:url('Pointers/Blob-5%20W.gif'); background-repeat: no-repeat;"></div>
    <asp:ImageButton ID="imgRight5" runat="server" CssClass="imgRight" ImageUrl="~/Images/forward.png" />
    <asp:TextBox ID="txtKPI5" runat="server" CssClass="txtKPI"></asp:TextBox>
    </div>
    <div id="divPhotoToolbar" runat="server" class="divPhotoToolbar">
    <asp:FileUpload ID="fupPhotos" runat="server" CssClass="fupPhotos" />
    <asp:Button ID="butUpload" runat="server" cssclass="butUpload" OnClick="butUpload_Click" Text="Upload" />
    <asp:Button ID="butPhotoDelete" runat="server" cssclass="butDelete" Text="Delete" />
    <asp:Button ID="butPhotoSave" runat="server" cssclass="butSave" Text="Save" />
    <asp:Button ID="butShowPhoto" runat="server" cssclass="butShowPhoto" Text="" />
    </div>
    CSS

    .divPhoto
    {
    clear: both;
    width:1030px;
    height:295px;
    position: relative;
    border-left: 1px solid gray;
    border-top: 1px solid gray;
    float: left;
    }

    .divPhotoContainer
    {
    width:390px;
    height:295px;
    float: left;
    }

    .imgPhoto
    {
    width:390px;
    height:295px;
    }

    .divPhotoToolbar
    {
    clear: both;
    width: 390px;
    height: 80px;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    }

    .butUpload
    {
    float:left;
    margin-top:10px;
    margin-left:25px;
    width:100px;
    height:30px;
    }

    .butDelete
    {
    float: left;
    margin-top:10px;
    margin-left:20px;
    width: 100px;
    height: 30px;
    }

    .butSave
    {
    float: left;
    margin-top:10px;
    margin-left:20px;
    width: 100px;
    height: 30px;
    }

    .butShowPhoto
    {
    width: 0px;
    height: 0px;
    }

    .fupPhotos
    {
    margin-top:5px;
    margin-left:10px;
    width: 370px;
    height:25px;
    }

    .divKPIs
    {
    position: relative;
    float: left;
    width:600px;
    height:294px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    }

    .imgLeft
    {
    margin-left:20px;
    margin-top: 20px;
    float: left;
    }

    .divFixedPointer1
    {
    position:absolute;
    top:19px;
    left:56px;
    height: 34px;
    width: 34px;
    }

    .divPointer
    {
    margin-top:10px;
    margin-left:10px;
    height:46px;
    width:46px;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
    }

    .imgRight
    {
    margin-left:10px;
    margin-top:20px;
    float: left;
    }

    .txtKPI
    {
    margin-left: 10px;
    margin-top: 20px;
    width:430px;
    float: left;
    }

    .divFixedPointer2
    {
    position:absolute;
    top:80px;
    left:56px;
    height: 34px;
    width: 34px;
    }

    .divFixedPointer3
    {
    position:absolute;
    top:140px;
    left:56px;
    height: 34px;
    width: 34px;
    }

    .divFixedPointer4
    {
    position:absolute;
    top:200px;
    left:56px;
    height: 34px;
    width: 34px;
    }

    .divFixedPointer5
    {
    position:absolute;
    top:260px;
    left:56px;
    height: 34px;
    width: 34px;
    }

    .imgClearLeft
    {
    float: none;
    margin-left:20px;
    margin-top: 20px;
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width