Rookie question: container div not containing

CFGerry · August 20th, 2005, 06:06 PM

Hi all. This is my first post, and I'd appreciate any help given.

I have a series of DIVs nested within each other with the outermost DIV having a 1px border. No matter what I do I cannot get the outer border to envelope all of the inner divs in FireFox. IE seems to be OK. I've stripped the code down to the basic boxes at http://pcg4.outofchaos.com/hamiltondev/test.cfm. (I also pasted the code below.) I find that when I put a float: left; on the bigBlackBoxDiv then the border does envelope all of the other DIVs, but as I want this DIV centered in the page, float: left; is counter-productive.

A workaround I found was to put yet another DIV around the existing ones, move the border and "margin: 0 auto;" out to that new DIV, and then float bigBlackBoxDiv to the left, but I am exploring CSS DIV's as a way to eliminate the annoying nesting of tables, so utilizing a large number of nested DIVs is just as annoying.

Can anyone recommend a way to acheive the desired results in Firefox without adding the extra DIV?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css"> 
</style>
</head>
<body>

<div id="bigBlackBoxDiv">
    <div id="topDiv">This is topDiv</div>
    <div id="leftSide">This is leftSide</div>
    <div id="rightSide">This is rightSide</div>
</div>

</body>
</html>

CFGerry · August 20th, 2005, 06:08 PM

I should mention that I want the border to expand vertically as the inner content DIV's grow in height. Sorry to have omitted that in my original comments

richard.york · August 22nd, 2005, 09:06 AM

Two things you can do
1.) Apply an overflow value other than visible to the "bigBlackBoxDiv"

Code:

    div#bigBlackBoxDiv {
        border: 1px solid black;
        margin: 0 auto;
        width: 600px;
        overflow: auto;
    }

2.) Add a clearing element directly after the floating elements.

Code:

<div id="bigBlackBoxDiv">
    <div id="topDiv">This is topDiv</div>
    <div id="leftSide">This is leftSide</div>
    <div id="rightSide">This is rightSide</div>
    <div style='clear: both;'></div>
</div>

Hope this is what you're looking for!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

richard.york · August 22nd, 2005, 09:16 AM

BTW, Firefox is correct in its interpretation of the standard here. Floating elements leave the flow. Opera, Safari, etc will also do the same here.

I don't recommend floating for multi-column layout though. Eventhough, it is possible, and I do recall some examples of this in my book. Floating simply has too many quirks to contend with, and in anything remotely complex you're likely to also run into other problems, not just browser bugs, but with how floating works. What if you need to clear a floated element nested inside a floated multi-column layout? If you do, you'll break the whole layout. Best to leave floating to flowing content around an element, instead of for layout.

Take a look at this thread for how to do a multi-column layout with positioning, which isn't subject to as many quirks as you're likely to find with floating.
http://p2p.wrox.com/topic.asp?TOPIC_ID=29544

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

CFGerry · August 22nd, 2005, 06:04 PM

Thank you for the reply.

I found that the overflow hack worked in Firefox and IE, but not in Netscape 7. The "clear" option worked in all three browsers.

Your comments about avoiding "floating for multi-column layout", along with the issues I've been having, have pretty much convinced me to avoid them indeed...problem is I'm not sure where to draw the line in the use of floating div's now, or what to do instead. I interpret what you are saying as floating div's are ok aside from the multi-column layouts, such as for wrapping text around block elements or getting two elements within a line to diverge to opposite sids of a div. Is that it? What's the alternative for the columns - tables? The application I'm currently writing for my client requires the page content to float in the middle of the page, which makes the absolute positioning idea problematic. Would you suggest using a div for the whole certer-aligned page frame (like my example) but split up the inside with tables where multiple columns are necessary? Just looking for your opinion on this.

richard.york · August 22nd, 2005, 06:26 PM

Yeah, which version of Netscape 7? Before Netscape 7.1 is really buggy, and overall crap for any remotely complex CSS. Netscape is just the Mozilla Gecko codebase anyway, except for NS 8 which lets you switch between Gecko and Windows Explorer Trident rendering engines. Netscape before 7.1 are pretty much dead browsers anyway with no statistical following.

The overflow method is nifty, but it is also sometimes pretty buggy cross-platform anyway, just depends on the context with which it is used.

> I interpret what you are saying as floating div's are ok aside from the multi-column layouts

Yeah, when you use floating for the layout of the entire page is where you're likely to run into /more/ problems. Floating can be buggy in other situations as well, such is the nature of web development. The problem is often times Windows Explorer, which has loads of floating bugs.

> The application I'm currently writing for my client requires the page content to float in
> the middle of the page, which makes the absolute positioning idea problematic. Would
> you suggest using a div for the whole certer-aligned page frame (like my example) but
> split up the inside with tables where multiple columns are necessary?

I'm not sure what you're saying. Centering a div is pretty easy, just set the width, and include the CSS margin: auto; declaration on the <div> itself. If you need compatibility with IE 5.5, put a text-align: center; declaration on the <div>'s parent element, then apply text-align: left; to the <div> itself (to reset inheritance). Position your columns inside that <div>, and relative to it. I could explain in better detail, if I had an example.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

CFGerry · September 1st, 2005, 09:00 PM

Richard -

The version of Netscape I'm testing on is:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)

The development page I'm building is at http://linuxdev.outofchaos.com/hamiltondev/. (Some of the images are streched random images that have been stuck in to flesh out the structure). I've been able to get the overall layout working pretty well. Since my last post I tried to use tables, but I had more difficulty controlling them. No matter what I did I couldn't get certain cells to hug the images they contained on all 4 sides. There was in at least one case a few pixels of space between the bottom of the image and the cell's bottom border. I couldn't get it to go away no matter what I did with padding and margins.

At any rate, thanks for the pointers - they helped alot.