View Full Version : wrapping issues

07-28-2007, 03:01 PM
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!


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.


07-28-2007, 04:17 PM
Sounds like you need to clear your floats. http://positioniseverything.net/easyclearing.html

07-28-2007, 08:51 PM
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... :-(

07-28-2007, 10:58 PM
Lose the height on #wrap and add

Then read this http://www.sharplogic.com/blogs/rsingh/PermaLink,guid,166c570e-5594-4c3c-91a4-acd220511479.aspx

07-29-2007, 06:25 PM
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

07-29-2007, 07:06 PM
It seems to be this

.cfx:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
Removing it doesn't seem to cause the layout to break.

07-29-2007, 07:17 PM
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.

07-29-2007, 07:38 PM
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.

07-29-2007, 08:32 PM
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


07-29-2007, 08:40 PM
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