• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 727
  • Last Modified:

css div float spills over container

I have a simple 2 column layout with a header and footer.  I am becoming more versed in floats and clears.

However, I have content from a div spilling over its containing div.  I have clear:both which just ensures that the div is stacked properly below, but it doesnt force the container to 'hold' this spilling div.  I have seen a solution, but cannot remember it.

Any simple ideas?

I will post code if needed, but I think this is a simple add of clear or block or something like that to force the container to stretch to hold the contents of this div.

Thanks!
0
ddarby14
Asked:
ddarby14
  • 11
  • 5
  • 3
1 Solution
 
ddarby14Author Commented:
Here's a simple visual as to what is happening:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x                                        x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x                        x               x
x       leftcol         x  rightcol  x
x                        x               x
x                        x               x
x                        x               x
x                        x               x
x                        x               x
x   yyyyyyyyyy      x               x
x   yy div yyyy      x               x
x   yyyyyyyyyy      x               x
x   yyyyyyyyyy      x               x
xxxyyyyyyyyyyxxxxxxxxxxxxxxxx
x   yyyyyyyyyy      footer        x
xxxyyyyyyyyyyxxxxxxxxxxxxxxxx
    yyyyyyyyyy
    yyyyyyyyyy
0
 
PetrTomenendalCommented:
Hi,
try this - add <div style="clear:both;"></div> after the div in the leftcol.

If it doesn't help, can you please post your code?
0
 
ddarby14Author Commented:
Tried that a couple of times to no avail... :(

Heres the html

<BEGIN HTML CODE>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" type="text/css" rel="stylesheet" media="all" />
<link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
<link href="print.css" type="text/css" rel="stylesheet" media="print" />
<script src="sifr/sifr.js" type="text/javascript"></script>
</head>
<body>

<div id="topshadow"></div>
<div id="main">
      <div id="middle">
            <div id="header">
                  <div><h6>text</h6></div>
            </div>
            <div id="nav">
                  <li><a href="#">personalities</a></li>
                  <li class="thislink">articles</li>
                  <li><a href="#">books</a></li>
                  <li><a href="#">life studies</a></li>
                  <li><a href="#">videos</a></li>
                  <li><a href="#">photo album</a></li>
                  <li><a href="#">websites</a></li>
                  <li><a href="#">contact me</a></li>
                  <span style="clear:left;"></span>
            </div>
            <div id="leftcol">
                  <div id="story">
                        <div id="date">Photo Albums :: Picture 001</div>
                        <div id="next"><a href="#">next</a><img src="images/arrow_right.gif" width="10" height="9" /></div>
                        <div id="previous"><img src="images/arrow_left.gif" width="10" height="9" /><a href="#">previous</a></div>
                        <div id="title"><h2>Outdoor Summer Fun with the Water Slide!</h2></div>
                        <div id="currentphoto"><img src="images/album01.jpg" width="400" height="300" /></div>

                        <div id="lightcomment"><a name="1"></a>
                              <div id="commentbody">
                                    <div id="commentauthor"><strong><a target="_blank" href="#">dave</a></strong> writes:
                                          Sample text.</div>
                                    <div id="commentdate">October  1, 2004 12:21 PM</div>
                                    <div id="tracker"><a href="#" title="Link to this comment">[ link ]</a></div>
                              </div>
                        </div>

                        <div id="lightcomment"><a name="2"></a>
                              <div id="commentbody">
                                    <div id="commentauthor"><strong><a target="_blank" href="#">dave</a></strong> writes:
                                          Sample text.</div>
                                    <div id="commentdate">October  1, 2004 12:21 PM</div>
                                    <div id="tracker"><a href="#" title="Link to this comment">[ link ]</a></div>
                              </div>
                        </div>

                  </div>
            </div>

            <div id="rightcol">

                  <div id="margintitle">Quote of the Day</div>
                  <div id="quote">"About all you can do in life is be who you are. Some people will love you for you. Most will love you for what you can do for them, and some won't like you at all."</div>
                  <div id="quoteauthor"><a href="#">Rita Mae Brown</a> (1944-)</div>
                  <div style="clear:right;"></div>

                  <div id="margintitle">Favorite Books</div>
                  <ul>
                        <div id="booktitle"><li><a href="#">21 Laws of Leadership</a></li></div>
                        <div id="bookauthor">John C. Maxwell</div>
                        <div id="booktitle"><li><a href="#">Coach Yourself to Success</a></li></div>
                        <div id="bookauthor">Talane Miedaner</div>
                        <div id="booktitle"><li><a href="#">Right-Brained Children in a Left-Brained World</a></li></div>
                        <div id="bookauthor">Jeffrey Freed &amp; Laurie Parsons</div>
                  </ul>

                  <div id="margintitle">Favorite Playlist</div>
                  <div id="playlist">
                        <div id="currentcd"><img src="images/simon_garfunkel.jpg" width="50" height="50" border="0" /></div>
                        <div id="currentcd"><img src="images/jimmy_buffett.jpg" width="50" height="50" border="0" /></div>
                        <div id="currentcd"><img src="images/lee_greenwood.jpg" width="50" height="49" border="0" /></div>
                  </div>
                  <div style="clear:left;"></div>

                  <div id="margintitle">Recent Articles</div>
                  <ul>
                        <div id="storytitle">
                              <li>Text</li>
                        </div>
                  </ul>

                  <div id="margintitle">Stories by Category</div>
                  <ul>
                        <div id="storytitle"><li><a href="#">Football</a></li></div>
                        <div id="storytitle"><li><a href="#">Entrepreneurs in America</a></li></div>
                        <div id="storytitle"><li><a href="#">Technology</a></li></div>
                  </ul>

                  <div id="margintitle">Life Studies</div>
                  <ul>
                        <div id="storytitle"><li><a href="#">Benjamin Franklin</a></li></div>
                        <div id="storytitle"><li><a href="#">Thomas Jefferson</a></li></div>
                  </ul>

            </div>
      </div>
</div>
<div id="footer">footer</div>

</body>
</html>
<END HTML CODE>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
ddarby14Author Commented:
And here's CSS

<BEGIN CSS>

/*MAIN STYLE DEFINITIONS */
/*version 0.91 date:11.23.2004*/


/*fix for non clearing divs*/
#clearing {
      clear:both;
      height:40px;
      }


/*MAIN STYLE RE-DEFINITIONS*/
body {
      font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      line-height: 1.6em;
      color: #000;
      background-color:#646e57;
      }
h2 { /*news story title*/
      margin:0 0 0 0;
      font-weight:bold; font-size:14px;
      }
ul { margin: 0 0 0 12px; }


/*FORM STYLES*/
.formfield {
      color: #444444; background-color: #FFFFFF;
      font:normal 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color:#444;
      border: 1px solid #BCBCBC;
      margin: 0px 0px 0px 0px;
/*      padding:2px 2px 2px 4px;*/
}


/*FRAMEWORK STYLES*/
#topshadow {
      margin:0 auto;
      width:698px; height:29px;
      background: #646e57 url(images/topshadow_green.gif) no-repeat;
      }
#main {
      width:698px;
      margin:0 auto;
      }
#footer {
      width:698px; height:29px;
      margin:0 auto;
      clear:both;
      background: #646e57 url(images/bottomshadow_green.gif) no-repeat;
      text-align:center;
      }


/*MIDDLE HOLDER*/
#middle {
      width:698px;
      clear:both;
      float:left;
      background: #e1e5dc;
      }


/*MAIN/MIDDLE STYLES*/
#header {
      width:698px; height:186px;
      background: #e1e5dc url(images/autumn.jpg) no-repeat;
      font:bold 50px Arial, sans-serif; color:#444;
      }
h6 { /*name in header*/
      float:right; width:100px;
      text-align:right;
      padding:16px 16px 0 0;
      font-weight:normal; font-size:24px;
      color:#fff;
      }
#nav {
      width:678px;
      clear:both;
      padding:4px 10px 4px 10px;
      text-align:center;
      background-color:#000;
      color:#fff;
      }
#nav li {
      list-style-type: none;
      display: inline;
      margin: 0 10px;
}
#nav a:visited { color: #fff; text-decoration:none; }
#nav a:link { color: #fff; text-decoration:none; }
#nav a:active { color: #fff; text-decoration:none; }
#nav a:hover { color: #e09f43; text-decoration:none; }
.thislink {
      font-weight:bold;
      border-bottom:1px solid #e09f43;
      color:#e09f43;
}
#leftcol {
      width:498px;
      float:left;
      background: #fff;
      min-height:auto;
      }
#rightcol {
      width:200px;
      float:right;
      }


/*STORY STYLES*/
#story {
      padding:10px 40px 20px 40px;
      }
#story a:visited { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#story a:link { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#story a:active { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#story a:hover { color: #e09f43; text-decoration:none; border-bottom:1px solid #e09f43; }
#date {
      font:italic 10px Arial, sans-serif; color:#444;
      float:left;
      margin:10px 0 8px 0;
      }
#time {
      font:italic 10px Arial, sans-serif; color:#444;
      float:right;
      margin:10px 0 8px 0;
      }
#title {
      clear:both;
      margin:0 0 20px 0; padding:0 0 0px 0;
      border-bottom:1px solid #777;
      }
#image {
      width:162px;
      float:right;
      padding:0 0 0 10px;
      }
#caption {
      width:162px;
      clear:right; float:right;
      text-align:center; font:9px /1.25em Arial, sans-serif; color:#444;
      padding:0 0 10px 10px;
      }


/*RIGHT MARGIN STYLES*/
#margintitle {
      margin:10px 0 4px 0; padding:0 8px 0 12px;
      font:bold 12px /1.25em Arial, sans-serif; color:#000;
      }


/*quote styles*/
#quote {
      padding:0 8px 0 16px;
      font:11px /1.25em Arial, sans-serif; color:#444;
      }
#quoteauthor a:visited { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#quoteauthor a:link { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#quoteauthor a:active { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#quoteauthor a:hover { color: #e09f43; text-decoration:none; border-bottom:1px solid #e09f43; }
#quoteauthor {
      float:right;
      padding:2px 6px 8px 16px;
      font:italic 11px /1.25em Arial, sans-serif; color:#444;
      }


/*book styles*/
#booktitle {
      padding:0 8px 0 16px;
      font:11px /1.25em Arial, sans-serif; color:#444;
      }
#booktitle li { list-style:url(images/bullet.gif) outside none;  }
#booktitle a:visited { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#booktitle a:link { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#booktitle a:active { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#booktitle a:hover { color: #e09f43; text-decoration:none; border-bottom:1px solid #e09f43; }
#bookauthor {
      padding:2px 0 4px 16px;
      font:italic 11px /1.25em Arial, sans-serif; color:#444;
      }


/*storynav styles*/
#storytitle {
      padding:0 8px 4px 16px;
      font:11px /1.25em Arial, sans-serif; color:#444;
      }
#storytitle li { list-style:url(images/bullet.gif) outside none;  }
#storytitle a:visited { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#storytitle a:link { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#storytitle a:active { color: #708866; text-decoration:none; border-bottom:1px solid #708866; }
#storytitle a:hover { color: #e09f43; text-decoration:none; border-bottom:1px solid #e09f43; }


/*playlist styles*/
#playlist {
      margin:8px 0 16px 14px;
      }
#currentcd {
      margin:0 2px;
      float:left;
      }


/*PHOTO STYLES*/
#photoalbum {
      clear:both;
      height:90px;
      padding:7px 7px;
      background-color:#e9e9e9;
      border:2px solid #d1d1d1;
      }
#photo {
      clear:both; float:left;
      }
#phototags {
      float:left;
      }

#albumtitle {
      width:190px;
      clear:right; float:right;
      margin:4px 0 0 15px;
      }
#albumdate {
      float:right;
      margin:0 0 0 14px;
      font:italic 9px /1.25em Arial, sans-serif; color:#444;
      }
#albumcomments {
      clear:right; float:right;
      margin:12px 0 0 6px;
      font:9px /1.25em Arial, sans-serif; color:#444;
      }
#albumrating {
      clear:right; float:right;
      margin:4px 0 0 6px;
      font:9px /1.25em Arial, sans-serif; color:#444;
      }

#photoselect {
      clear:both; float:left;
      margin:10px 0 0 0; padding:3px 3px;
      background-color:#f0f0f0;
      border:1px solid #d1d1d1;
}
#photoselect2 {
      float:left;
      margin:10px 0 0 10px; padding:3px 3px;
      background-color:#f0f0f0;
      border:1px solid #d1d1d1;
}
#currentphoto {
      clear:both;
      width:400px;
      margin:10px 0 20px 0; padding:3px 3px;
      background-color:#f0f0f0;
      border:1px solid #d1d1d1;
}

#previous {
      font:11px Arial, sans-serif; color:#444;
      float:right;
      margin:10px 10px 8px 0;
      }
#next {
      font:11px Arial, sans-serif; color:#444;
      float:right;
      margin:10px 0 8px 0;
      }

#lightcomment {
      float:none;
      position:relative;
      z-index:2;
      margin:20px 0;
      width:407px;
      background: #f0f0f0;
}
#commentbody {
      position:relative;
      z-index:2;
      padding:16px;
}
#bignumbers {
      position:absolute; top:0; right:-25px;
      padding:50px 0 0 0;
      height:100px;
      color: #fff;
      font-family: Times, "Times New Roman", serif;
      font-size: 186px;
      z-index:1;
      text-align: right;
}
#commentauthor {
      font-size: 13px;
      line-height: 19px;
      padding: 0 0 8px 0;
      font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
#commentdate {
      float:left;
      font:italic 9px Arial, sans-serif; color:#444;
      margin:18px 10px 0 0; padding:0 0 12px 0;
}
#tracker {
      float:left;
      font:italic 9px Arial, sans-serif; color:#444;
      margin:18px 0 0 0;
      }

<END CSS>
0
 
ALaRivaCommented:
We'll need to see the CSS as well.

-Anthony
0
 
ALaRivaCommented:
I was just a hair too slow

-Anthony
0
 
ddarby14Author Commented:
ha! thanks

this is the styles.css btw

also, i do notice when i pull the js link out, it works fine.  The sifr.js is a flash header that converts titles into flash text with stylized font - you may be familiar with it.  I'll grab the code for that too and the CSS.  I suspected that maybe the CSS was being alterered to NOT inlcude a clear, but doesnt look like at first glance...

Dave
0
 
ddarby14Author Commented:
here is screen.css (interestingly enough: with the js link intact, the print preview appears correctly which of course is averting this CSS..??)

<BEGIN CSS>

.sIFR-hasFlash h2 {
      visibility: hidden;
      letter-spacing: -9px;
      font-size: 28px;
      }
.sIFR-hasFlash h6 {
      visibility: hidden;
      letter-spacing: -9px;
      font-size: 28px;
      }
.sIFR-flash {
      visibility: visible !important;
      margin: 0;
      }
.sIFR-replaced {
      visibility: visible !important;
      }
span.sIFR-alternate {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      display: block;
      overflow: hidden;
      }
<END CSS>
0
 
ddarby14Author Commented:
ok...this is weird

If I pull the <h6> tag, the page displays fine.

If I pull the <h2> ONLY, the page has same spill over the container- so this seems to isolate major problem to <h6>.
0
 
ddarby14Author Commented:
Sorry for the disjointed thoughts...

Also, hovering over a link 'streches' the leftcol container and fixes the page.
0
 
PetrTomenendalCommented:
I don't  see the problem here, as i don't have that js file. it's pretty hard to debug something you can't see. so just one more try and i am going to bed - its 23pm here ;).

h6 has float:right in your styles and in code it looks like this:
          <div id="header">
               <div><h6>text</h6></div>
          </div>

there is no "clearing" div and may be that is causing troubles:
          <div id="header">
               <div><h6>text</h6><div style="clear:both;"></div></div>
          </div>
0
 
ddarby14Author Commented:
well, about to post js file - the js file has the code that swaps the styles of h2 and h6 with flash.  I changed the order to h6, then h2 in the swap and that worked...???

If you're interested in working through this with me to find out why I can post the js...

Thanks - I'm going to walk away for a bit - dinner time here...
0
 
PetrTomenendalCommented:
back again - if you still need help, can you please post that js file or, which i think will be better, link to that page? (if it is avaible on public internet)
0
 
ddarby14Author Commented:
hi petr

here is a link: http://www.coachmapp.com/test.htm

thanks!
0
 
PetrTomenendalCommented:
so i looked at that page and i can see no "spilling" there.

screenshots from my browsers are here, if you want to take a look:
IE 6 SP2:
http://62.245.115.132/~skeeve/coachmappie.jpg

Firefox 0.8
http://62.245.115.132/~skeeve/coachmappfirefox.jpg

both of them have size around 150KB.

there are little differences between IE and Firefox - mostly in fonts, but nothing major.

btw I think it is very nice page.
0
 
ddarby14Author Commented:
thanks!

as i commented above...I changed the order to h6, then h2 in the swap (sifr.js lines 409 and 410) and that worked...for whatever reason

I'll change the order and u can see the spillage (it only happens in IE - surprise!)

Note: rolling over a link extended div container to hold as it should - nice!
0
 
PetrTomenendalCommented:
i got it - but i was almost completely desperate - you will see at the end of the post ;)

i don't know why, but this seems to work - seperate header with menu from the rest of the page.
at the top of the page you have this code:
            <span style="clear:left;"></span>
        </div>
        <div id="leftcol">
            <div id="story">

change it to this:
            <span style="clear:left;"></span>
        </div>
    </div>
    <div id="middle">
        <div id="leftcol">
            <div id="story">

it's pretty dirty - you should change id="middle" to class="middle" and alter css files to reflect this change later.


and this is what i was writing just five minutes ago ;):
i give up. i cann't figure out why IE behaves in this strange way.

i tracked the cause down to the line 321 in sifr.js - it is in function replaceElement - there is this:
node.appendChild(nodeFlash);

that's place, where newly created node with embed tag is appended into dom. it has all parameters like class and dimensions set. when this is executed for h6 after h2, then IE goes completely crazy - you even cann't scroll down to see end of the page - i think, that at this moment IE has no "knowledge" of real dimensions of the page.
0
 
ALaRivaCommented:
My Answer, via the other post.  

OK, Add a clearing DIV just after the two columns.

I tried adding it and it works fine.

i.e.
<A href="http://www.coachmapp.com/test.htm#">Thomas
  Jefferson</A></LI></DIV></UL></DIV><div style="clear:both;"></div></DIV></DIV>
<DIV id=footer>footer</DIV></BODY></HTML>

I just showed the place where I put it at the end of the page.  That's all that should be needed.

HTH
-Anthony
0
 
ddarby14Author Commented:
Thanks Anthony...obviously when testing I put the clearing tag one </div> too high which did not get the clearing tag outside of the rightcol.  This was the problem and now, regardless of the h2 h6 order, it works.

Petr, thanks for all of your help.  We were close, but this was obviously my dup.  Thanks again!
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 11
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now