section31 Posted December 10, 2003 Posted December 10, 2003 Hi, Lets say you have 2 boxes, 1 floating inside the other box. How can you make the outer box grow according to the content thats in the floating box inside that box. If I'm not making any sense i apologize...see included webpage for an example. Notice that when u have a box with a flloat value inside the other it doesn't expand according to its content. http://davesrig.us/css.html PS. I know what a bunch of you are thinking...why don't u juse use tables and make 2 columns...duh...Well, b/c I'm trying to make a site w/o any tables. thanks, Dave Quote
borfast Posted December 10, 2003 Posted December 10, 2003 (edited) Hi Dave. First of all, congratulations for having the courage to embark on such an adventure (tableless layouts)! I'm not sure I understood your problem. You want the outer box to grow depending on the inner box's contents? Meaning, you want the outer box to grow according to the inner box size, is that it? Edited December 10, 2003 by TCH-Raul Quote
section31 Posted December 10, 2003 Author Posted December 10, 2003 Yup thats it...just as it does when the inner box isn't set to float. Quote
borfast Posted December 10, 2003 Posted December 10, 2003 Oh! OK, I got it! Took me some time looking at the screen but now I understood: you want the box height to grow, is that it? I thought you wanted the box width to grow and I'm really not sure if that's possible at all. If I'm not mistaken, that's a bug present in most (all) browsers I tried it in Mozilla Firebird 0.7, Opera 7 and Konqueror 3.1 and all of them displayed the page incorrectly. Somebody correct me if I'm wrong but I think this is what's going on and I also think I've read about this exact problem in a website just a few days ago but I can't find it again Quote
section31 Posted December 12, 2003 Author Posted December 12, 2003 Are u sure this is a bug. I thought it was normal, I thought there would be a way around this though. I guess i was wrong. Quote
borfast Posted December 12, 2003 Posted December 12, 2003 Well, it certainly is strange that all browsers have the exact same bug but I'm almost absolutely sure it is indeed a bug. Otherwise, it wouldn't make sense the "float: left" work and "float: right" not work. Besides, I can almost swear that I have read something about that not too long ago but I can't find it Here's a website that does talk about several bugs in various browsers' CSS implementations. http://positioniseverything.net/ Not the one I was looking for but may have interesting stuff Quote
section31 Posted December 13, 2003 Author Posted December 13, 2003 This is straight from the link Remember, floats are not actually contained within a block box, even though they may be nested there in the source code. Sure, the float's screen starting point is determined by its nested location, but after that it just drapes over the containing box, as do absolute elements. Only line boxes containing inline elements (like text) will care where the float is displayed. So you see its not a bug. So now my question is, how can i simulate 1 table (1 row -> 2 columns of 50%) inside a box with CSS. Thats basically what i've been trying to do from the beginning... I guess floats won't work like i thought after all. thx for the replies raul. Quote
borfast Posted December 13, 2003 Posted December 13, 2003 (edited) Interesting! Looks like I had the wrong idea! Thanks for clearing it up (and for remindind me that I should read the stuff in the URLs I suggest instead of just trusting my memory, which sometimes may not be as trustworthy as I think ) As for the layout you're trying to achieve, try these links: thenoodleincident.com/tutorials/box_lesson/boxes.html bluerobot.com/web/layouts/ glish.com/css/ glassdog.com (thanks for this one, Don! Pretty good one, too! ) Or even this google search: http://www.google.com/search?q=css+layouts Edited December 13, 2003 by TCH-Raul Quote
davejenbarnes Posted January 7, 2004 Posted January 7, 2004 I had this EXACT same concern on my website and cleared it up with the html tag: <div style="clear:both"></div> right before I closed the div tag for the first, outter box and it contained my smaller greenish box and the text box (which are both set to float--one right and the other left) completely. Hope that clears up your concern. Sorry I didn't post earlier! Jennifer Barnes Quote
davejenbarnes Posted January 8, 2004 Posted January 8, 2004 I explain this a little clearer in the middle of my last post at this thread. Here is a more precise link: CSS "clear" property explained and look for the face in the middle of my message. Again, hope this helps! Jennifer Quote
section31 Posted January 11, 2004 Author Posted January 11, 2004 OMG THANK YOU SO MUCH. THIS IS SWEEEEEEEEEEEEEET. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.