SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Should I Position This DIV?

    I am wanting the position the DIV #member to the top right of the banner and have it move with the rest of the site. As you can see with this link below, the DIV #member stays in place and doesn't move with the rest of the site.
    LINK-
    http://www.securehostserver.info/~msbclcc/test/


    Here is an example of the position I am wanting that DIV to be in.
    LINK-
    http://www.securehostserver.info/msbc/


    Thanks in advance to anyone who can help.

    Todd
    Todd Temple > T2 Design

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Todd,
    Since your #member div is absolute positioned it is positioning from the nearest positioned ancestor, the body element in your case.

    Set position:relative; on your #wrapper div to establish it as the containing block for the AP #member div.

    Since that member div is on the right side of the wrapper div you can just say right:0; instead of left:895px;

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick! I will read up with the reference link. Thank you so much.
    Todd Temple > T2 Design

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I will read up with the reference link.
    That was really just an example, you can learn more about positioning at the SP reference.

    http://reference.sitepoint.com/css/position
    http://reference.sitepoint.com/css/containingblock

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur, Can you take a peek at the image I have floating to the right with the class .floatRight? It appears correctly in Safari and IE8 but looks odd in IE7 and IE6? Any thoughts as to why?

    LINK-
    http://www.msbclc.com/test/

    I also just noticed that my navigation bar (mustard yellow) is not fitting the exact width in IE6. It appears to be too long....
    Todd Temple > T2 Design

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, after the image that has .floatRight , wrap those elements in a <div> (give it a calss) and then give that element haslayout
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I also just noticed that my navigation bar (mustard yellow) is not fitting the exact width in IE6. It appears to be too long....
    Hi,
    That's because the #content div is stretching the main wrapper due to a Double Margin Bug on the #content div. The fix is display:inline;

    Code:
    #content { 
    width: 637px; 
    float: right; 
    margin-right: 31px;
    display:inline; /*fix ie6 double margin bug*/
     }
    EDIT:
    The double margin bug was not causing the navbar problem but it still needs to be fixed.

    The navbar problem is IE6 stretching the #nav due to the 53px left margin added to the 980px width. The #wrapper is 980px so the navbar hangs out.

    Code:
    #nav { 
    width: 927px; /*980px*/
    height: 36px; 
    margin: 0 0 0 53px; 
    padding: 0; 
    list-style: none;
     overflow: hidden;
     }

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    To fix the first problem with the floated right image just remove the 100&#37; width from your h2, you added a 10px right margin and it exceeds the available space.

    There is no need to add any new divs to the html .

    It was the same problem that I mentioned above, you are not allowing for margins with your total widths. Block level elements are 100% by defaullt and you don't have to declare the width or display:block. As long as you don't set a width the browser will account for the margin.
    Code:
    #content h2 {
        /*display: block;*/
        /*width: 100%;*/
        text-indent: -9999px;
        border-bottom: 1px solid #C1C1C1;
        margin: 0 0 10px 0;
    }

  9. #9
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    EDIT:
    The double margin bug was not causing the navbar problem but it still needs to be fixed.
    Thanks for the edit! That did the trick. I really appreciate your help. Do you think I still need the clearfix class that Ryan Reese was referring to?
    Todd Temple > T2 Design

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    Thanks for the edit! That did the trick. I really appreciate your help. Do you think I still need the clearfix class that Ryan Reese was referring to?
    Hi,
    As I mentioned above there is no need for any new divs in the html. Ryan's suggestion was to wrap everything after the image in a div and set "haslayout" on it. The text would not wrap under your right image if you did that though. There was never anything mentioned about adding a "clearfix", your floats are being contained just fine. The overflow:hidden on your #main is taking care of float containment and the width there is giving haslayout to IE6/7 which will contain floats.
    Code:
    #main {
        background: #FFF url(../i/gfx_bkg_main.gif) repeat-y;
        width: 950px;/*IE6/7 haslayout = float containment*/
        padding: 0 15px 20px;
        overflow: hidden;/*float containment*/
        border-top: 20px solid #FFF;
        border-bottom: 20px solid #FFF;
    }
    As long as you remove the 100&#37; width on the #content h2 that I noted in my last post IE6/7 will be just fine.

    I would remove the height from your wrapper div though, heights really should not be set on pages that need to expand with content.

    Code:
    #wrapper {
        width: 980px;
        /*height: 1100px;*/
        margin: 0px auto;
        padding-bottom: 0;
        position: relative;
    }


Bookmarks

Posting Permissions

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