Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: wrapping issues

  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    wrapping issues

    I have posted this on another coding site as well, but a lack of replies has forced me to look elsewhere. Hope you guys can help!

    http://www.pzfantasyfootball.com

    I have a personal fantasy football site and it's looking good so far, just one problem, the wrap won't go flush with the bottom of the browser because for some reason the cfx class I implemented will not wrap the bottom 3 images..

    I know I probably didn't explain it very well so if you take a look at the site and are confused as to what I'm asking feel free to ask questions, Im very easy going so I'll help the best I can... I'm going to border the wrap ID with 2px red and the bottom nav id with 2px blue so you can see it better.

    Thanks!!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Sounds like you need to clear your floats. http://positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    wow aero.. never thought I'd see you again... and I already have... followed it to a T... dont know what else it could be... :-(

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Lose the height on #wrap and add
    Code:
    min-height:100%;
    Then read this http://www.sharplogic.com/blogs/rsin...220511479.aspx
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    wow how simple... thanks!!!

    another issue though that I thought would be fixed with this, but wasn't.... the bottom of the #wrap isn't flush with the bottom of the browser... I used

    * {margin:0; padding:0;}

    to try and kill that, but it didn't work. Unsure where the extra padding or height could be coming from... im using Firefox 2.0 btw

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It seems to be this
    Code:
    .cfx:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    Removing it doesn't seem to cause the layout to break.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    it actually does break the wrap right back to where I was when I started the thread... if you look close there's a 1px extension on the right side... that's where the #wrap ends and the rest is the #bot div continuing outside of the wrap

    I can actually get rid of the 1px nuisance by adding "background-color: #fff" to the #bot division, however I'm just curious to see why it's doing this as I've never had this problem before and I've used similar layouts in the past.
    Last edited by sportsfanatic54; 07-29-2007 at 07:20 PM.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Put the clearfix on #bot and add clear:both to #bot. Get rid of it on #wrap. Double check the widths of your columns. Remember padding counts for overall width. It looks like one of your columns is 1px to wide.
    Last edited by _Aerospace_Eng_; 07-29-2007 at 07:41 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    still no dice... this is very baffling... checked the widths and they should be fine, there is no padding on the actual div id's themselves which makeup the layout, only on the text classes which I put all the content in, and they all have flexible 100% widths which would take the padding into account...

    otherwise the top section is : 200px + 600px + 200px = 1000px

    the bottom is: 333px + 333px + 333px = 999px

    Eeek!!!

  • #10
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    well I just took the:

    height: 0;

    out of the code, seeing how as that was what seemed to be the problem, and bada bing it worked!!!

    Haven't done any cross browser testing yet but works to perfection in firefox 2.0


  •  

    Posting Permissions

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