Forum:

HTML Pages with CSS and JavaScript

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

Mike Curwen

Ranch Hand

Posts: 3695

I like...

posted 21 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This is sort of a continuation of this post...
https://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 ?

/* **************   DEFAULTS  ************ */
body, p, td, tr, li, a, table {
font-family:Trebuchet MS, Verdana, sans-serif;
    font-size:10pt;
    margin: 0px;
}
/* **************    PANES    ************ */
.indented {
margin: 5px 5px 5px 5px;
}
.banner { 
margin: 0px; 
}
.contentPane {
border-style: solid;
border-color: #bbbbbb; 
border-width: 1px;
padding: 5px;
}
.navPane {
margin: 0px;
padding: 2px;
}

/* **************  NAVIGATION ************ */
.rightNav {
position: absolute;
right: 10px;
text-align: right;
}
.leftNav {
position: absolute;
left: 10px;
text-align: left;
}
/* **************     TEXT    ************ */
.bannerText {
text-align: center;
font-size: 20pt;
}
/* **************   COLUMNS   ************ */
.columnBuffer {
bottom-padding: 20px;
}
.mainright {
width:25%;
float:left;
padding: 5px;
}
.maincenter {
width:25%;
float:left;
padding: 5px;
}
.mainleft {
width:25%;
float:left;
padding: 5px;
}
 
 
 //html
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Welcome to the test page</title>
</head>
<body>
<div class="banner BGprimary">
<div class="bannerText FGmanilla">Banner</div>
</div>
<div class="navPane BGmediumrow">
    <span class="leftNav"><a href="#">Home</a> | <a href="#">Link</a></span>
&nbsp;
    <span class="rightNav"><a href="#">Logout</a> | <a href="#">Help</a></span>
</div>
<br />
<div class="indented">
    <div class="contentPane">
        <br />
        Hello
        <div class="contentPane">
        <br />
        Again<br />
        <br />
            <div class="mainleft"><div class="messagePane BGmanilla">YO!</div></div>
            <div class="maincenter"><div class="messagePane BGlightrow">Column 2, yo!</div></div>
            <div class="mainright">
                <div class="messagePane BGmediumblue">
                Bling, bling
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                </div>
            </div> 
        </div>
    </div>
</div>
</body>
</html>

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

Posts: 15385

posted 21 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 3695

I like...

posted 21 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 15385

posted 21 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I just wish that they could install patches to fix all browsers on a css standard....
LOL

Mike Curwen

Ranch Hand

Posts: 3695

I like...

posted 21 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I think I managed to kill this one as well.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Welcome to the test page</title>
<style type="text/css">

body {
text-align:center;
}

.frame {
width:95%;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
border-style: solid;
border-color: #bbbbbb; 
border-width: 1px;
padding: 5px;

}

.contentleft {
width:33%;
padding:0px;
float:left;
background:#fff;
}
 
.contentcenter {
width:33%;
padding:0px;
float:left;
background:#eee;
}

.contentright {
width:33%;
padding:0px;
float:left;
background:#fff;
}

#contentheader {
background:#fff
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}

#contentright p { font-size:10px}

</style>
</head>
<body>
<div class="banner BGprimary">
<div class="bannerText FGmanilla">Banner</div>
</div>
<div class="navPane BGmediumrow">
    <span class="leftNav"><a href="#">Home</a> | <a href="#">Link</a></span>
 
    <span class="rightNav"><a href="#">Logout</a> | <a href="#">Help</a></span>
</div>
<br />
<div class="indented">
    <div class="contentPane">
        <br />
        Hello
        <div class="frame">
        <br />
        Again<br />
        <br />
            <div class="contentleft"><div class="messagePane BGmanilla">YO!</div></div>
            <div class="contentcenter"><div class="messagePane BGlightrow">Column 2, yo!</div></div>
            <div class="contentright">
                <div class="messagePane BGmediumblue">
                Bling, bling
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                Lorum, ipsum locsit, ibid, fuh-shizzle, opsit, caveat emptor cogito ergo sum
                </div>
            </div>
            <br clear="all" />

            <br />
            <div class="contentPane">
            Foo!!!!
            </div>
        </div>
    </div>
</div>
</body>
</html>

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

Posts: 3695

I like...

posted 21 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 15385

posted 21 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Man you are just turning into the CSS guru. I should study that more, but that would flood into my TV time!
Eric

Consider Paul's rocket mass heater.