aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes using CSS float attribute makes things 'leak' out of their containers ? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "using CSS float attribute makes things Watch "using CSS float attribute makes things New topic
Author

using CSS float attribute makes things 'leak' out of their containers ?

Mike Curwen
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

This is sort of a continuation of this post...
http://www.coderanch.com/t/114191/HTML-JavaScript/Combining-css-margin-table-width

Anyways, I 'fixed' my problem by dropping tables altogether. I figured out how to get text to be left-aligned and right-aligned on the same line, which is one of the major things that tables can give you. Make a table 100%, have two columns. left-align one, right-align the other, and presto.

However, the other things that tables gives you has apparently long been the subject of some gnashing of teeth, and in fact the CSS people have decided to include some column type attribute in CSS3 (congrats on getting all the browser vendors on board with CSS2, btw). The thing in question? newspaper-layout. The 'holy grail' of 3-column layout.

Anywho.. one of the more common techniques appears to be using a 'float' attribute (I'm probably using the wrong word there?)... here is my CSS and HTML. You'll see the problem (in IE6, Mozilla, Thunderbird).. the columns do not stay within their boxes.

Any ideas ?



There is *one* site I've seen that appears able to get it right...
http://glish.com/css/2.asp

Their three columns are all well-behaved.. they aren't within a div with a border though, so perhaps I'm asking too much?

The one difference I can see is they appear to insert a piece like:

immediately below their columns. I haven't quite figured out what this does, or where to place it in my source to get it looking right.

apologies for the huge post.
[ December 09, 2003: Message edited by: Mike Curwen ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
The page you show me whows up as
COLUMN-L COLUMN-C
COLUMN-R
when I maximaize my screen
and when my screen is not it shows up correctly....
did you look at
http://glish.com/css/7.asp
I think that one is what you are trying to do.
Eric
Mike Curwen
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

Look what happens when you start to shrink that page though... the columns start to get really messed up. This one ( http://glish.com/css/2.asp ) really degrades gracefully.

As for the maximizing issue.. I haven't run into that (yet). I *have* noticed that IE will sometimes 'flicker' between :
LC, CC
RC

and
LC, CC, RC
If you maximize IE, and it happens to 'flick' to the first state, then you're stuck there. I think it's an IE display glitch, exactly like the one I found in my previous post about table width % and css margins. sometimes its there, sometimes not.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
I just wish that they could install patches to fix all browsers on a css standard....
LOL
Mike Curwen
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

I think I managed to kill this one as well.
Works pretty good on Mozilla1.6b/IE6 on PC. Not so good on any Mac browser The 'frame' div stretches to fit the interior divs. On IE6, the <br clear='all'> is not required, as noted in the code. Firebird 0.7 doesn't require it to stretch the frame div, but *does* require it for another reason; the last wide div with 'foo!' in it would stretch up and behind the larger div to the right, and fill in the whole space. Seems it treats its top position as coming right after the bottom position of the shortest div (either of the first two columns above it, rather than the longer 3rd column).
[ January 07, 2004: Message edited by: Mike Curwen ]
Mike Curwen
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

as a bonus, this CSS doesn't appear to have the

LC, CC
RC

and
LC, CC, RC

problem, and it also doesn't invoke the 'IE flicker' bug.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Man you are just turning into the CSS guru. I should study that more, but that would flood into my TV time!
Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: using CSS float attribute makes things 'leak' out of their containers ?