Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts

    divs breaking out of divs :-(

    I'm making a new version of my site using DIV's instead of Tables cause of the obvious advantages. But I'm having a problem where 2 div's are breaking out of the container div, but only in Netscape, it's fine in IE. I've tried everythign I could think of, but I don't understand why it would brek out instead of just pushing the other div down farther, because it doesn't have a set height. I'm confused, can someone please help me?

    My CSS is:
    Code:
    body {
     margin:0px;
     background-color:white;
     color:black;
     text-align:center;
     padding:0;
     }
    
    a:link {color:black; background-color:white;}
    a:visited {color:black; background-color:white;}
    a:hover {text-decoration:none; background-color:white; color:black;}
    a:active {color:black; background-color:white;}
    
    #outer {
     text-align:left;
     border:1px solid black;
     width:760px;
     margin:auto;
     }
    
    #hdr {
     height:100px;
     background-color:#000099;
     color:black;
     }
    
    #bar {
     border-left:0px solid black; border-right:0px solid black; border-top:1px solid black; border-bottom:1px solid black; height:21px;
     background-color:white;
     color:black;
     }
     
    #dropmenudiv{
     border-left:1px solid black; border-right:1px solid black; border-top:1px solid black; border-bottom:0px solid black; position:absolute;
     background-color:white;
     color:black;
     line-height:18px;
     z-index:100; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:verdana;
     }
    
    #dropmenudiv a{
     width: 100%;
     display: block;
     text-indent: 3px;
     border-bottom: 1px solid black;
     padding: 1px 0;
     background-color:white;
     color:black;
     text-decoration: none;
     font-weight: bold;
     }
    
    #dropmenudiv a:hover{ 
     background-color:#000099;
     color:black;
     }
    
    #bodyblock {
     position:relative;
     background-color:white;
     color:black;
     width:760px;
     padding:0;
     }
    
    #l-col {
     float:left;
     background-color:white;
     color:black;
     width:152px;
     }
    
    #cont {
     border-left:1px solid black; border-right:0px solid black; border-top:0px solid black; border-bottom:0px solid black; width:604px;
     background-color:white;
     color:black;
     text-align:left;
     }
     
    #dblck {
     position:relative;
     background-color:white;
     color:black;
     width:604px;
     padding:0;
     }
     
    #ldv {
     float:left;
     margin-left:4px;
     border-left:1px solid black; border-right:1px solid black; border-top:1px solid black; border-bottom:1px solid black; width:211px; height:130px;
     background-color:white;
     color:black;
     text-align:center;
     }
     
    #rdv {
     float:left;
     border-left:0px solid black; border-right:1px solid black; border-top:1px solid black; border-bottom:1px solid black; width:377px; height:130px;
     background-color:white;
     color:black;
     text-align:left;
     }
    
    #ftr {
     border-left:0px solid black; border-right:0px solid black; border-top:1px solid black; border-bottom:0px solid black; height:25px;
     background-color:white;
     color:black;
     margin:0px;
     }
    and my HTML is:
    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" xml:lang="en" lang="en">
    <head>
    <title>Save The Pit Bulls</title>
    <meta name="description" content="This site is full of information about pit bulls. Everything from pictures, information, myths and facts are here. Visit this website to learn the truth about pit bulls." />
    <meta name="Keywords" content="pit bull, pit, bull, information, american, staffordshire, terrier, american staffordshire terrier, am staff, american, pit, bull, terrier, american pit bull terrier, apbt, english staffordshire terrier, enlish, england, england staffordshire terrier, staffordshire, terrier, staffy bull, staffie bull, staffy, staffie, bull, pictures, activities, myths, facts, staffordshire bull terrier, staffordshire, bull, terrier, sbt, links, bsl, rescue, gifts, famous, games, faq, forum, chat, questions, poll, answers, adoption, save, help" />
    <meta name="robots" content="INDEX,FOLLOW" />
    <meta name="author" content="Dave Wright" />
    <meta name="rating" content="General" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <link rel="stylesheet" type="text/css" href="layout.css" media="screen, projection" />
    <link rel="stylesheet" type="text/css" href="text.css" media="screen, projection" />
    <script type="text/javascript" src="../scripts/mark.js"></script>
    </head>
    <body alink="#000000" link="#000000" text="#000000" vlink="#000000" bgcolor="#FFFFFF">
    <div id="outer">
    <div id="hdr" align="center">
      <img border="0" src="../menu/mlogo.gif" width="757" height="100" alt="Save The Pit Bulls" /></div>
    <div id="bar">
    <script type="text/javascript" src="../scripts/popup.js"></script>
    <script type="text/javascript" src="../scripts/nav.js"></script>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '150px')" onmouseout="delayhidemenu()"><img border="0" src="../menu/info.gif" width="100" height="21" alt="Information" /></a>&nbsp;&nbsp; 
        <a href="" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu2, '180px')" onmouseout="delayhidemenu()"><img border="0" src="../menu/sc.gif" width="155" height="21" alt="Stories and Comments" /></a>&nbsp;&nbsp; 
        <a href="" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu3, '130px')" onmouseout="delayhidemenu()"><img border="0" src="../menu/cnct.gif" width="90" height="21" alt="Connections" /></a>&nbsp;&nbsp; 
        <a href="" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu4, '225px')" onmouseout="delayhidemenu()"><img border="0" src="../menu/misc.gif" width="45" height="21" alt="Misc." /></a>&nbsp;&nbsp; 
        <a href="javascript: contact();"><img border="0" src="../menu/contact.gif" width="90" height="21" alt="Contact Us" /></a>&nbsp;&nbsp; 
        <a href="javascript: bookmark();"><img border="0" src="../menu/bmu.gif" width="110" height="21" alt="Bookmark Us" /></a>&nbsp;&nbsp; 
        <a href="/index.html"><img border="0" src="../menu/home.gif" width="45" height="21" alt="Home" /></a></div>
    <div id="bodyblock" align="right">
    <div id="l-col" align="center">
    <script type="text/javascript" src="../scripts/date.js"></script>
    <br />
    <form method="get" action="http://www.google.com/search">
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="hidden" name="oe" value="UTF-8" />
    <a href="http://www.google.com/" target="new"><img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" width="128" height="53"></a>
    <input type="text" name="q" size="20" maxlength="255" value="" style="border:1px solid; border-color:000000; background-color:transparent; color:000000; font-family:verdana; font-size:9pt" />
    <br />
    <input type="submit" name="btnG" value="Google Search" style="border:1px solid; border-color:000000; background-color:transparent; color:000000; font-family:verdana; font-size:9pt" />
    </form>
    <br />
    <br />
    <br />
    <script type="text/javascript" src="../scripts/copy.js"></script>
    <br />
    <br />
    <a href="http://validator.w3.org/" target="new"><img border="0" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
    <a href="http://jigsaw.w3.org/css-validator/" target="new"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
    </div>
    <div id="cont">
    <br />
    <center><img border="0" src="../welcome.gif" width="400" height="40" alt="Welcome to Save The Pit Bulls!" /></center>
    <br />
    <br />
    <center><a href="/load.html"><img border="1" src="../sitepics/collage.gif" width="588" height="150" alt="Click here to visit our Pictures Page!" /></a></center>
    <br />
    <div id="dblck">
    <div id="ldv">
    <script type="text/javascript" src="http://www.tag-board.com/tagboard.js?boardname=pit_bulls"></script>
    <iframe src="http://www.tag-board.com/my.tag?name=pit_bulls" name="tag" width="203" height="309" marginwidth="0" marginheight="0"></iframe>
    <script type="text/javascript">netscape_support();</script><br />
    <a href="http://www.tag-board.com/" target="new"><font face="verdana" style="font-size:9pt; color:black">TagBoard Message Board</font></a><br />
    <form action="http://www.tag-board.com/add.tag" method="post" name="tagform" target="tag"> 
    <input type="hidden" name="name" value="pit_bulls" /> 
    <span class="mtext"><b>Name:</b></span><br />
    <input name="tagname" maxlength="20" size="26" style="border:1px solid; border-color:000000; background-color:#FFFFFF; color:#000000; font-family:Verdana; font-size:10pt" /><br /> 
    <span class="mtext"><b>URL or E-mail:</b></span><br />
    <input name="tagurl" maxlength="100" size="26" style="border:1px solid; border-color:000000; background-color:#FFFFFF; color:#000000; font-family:Verdana; font-size:10pt" /><br /> 
    <span class="mtext"><b>Messages [<a href="http://www.tag-board.com/smilies/smilies.htm" onclick="return pop_up_smilies();" target="new"><font color="#000099">smilies</font></a>]:</b></span><br /> 
    <textarea cols="25" rows="5" name="message" style="border:1px solid; border-color:000000; background-color:#FFFFFF; color:#000000; font-family:Verdana; font-size:10pt"></textarea><br />
    <input type="submit" value="Tag It!" onclick="return Clear_Last_Message_on_Submit();" style="border:1px solid; border-color:000000; background-color:#FFFFFF; color:#000000; font-family:verdana; font-size:10pt; font-weight:bold" />
    </form> 
    <script type="text/javscript">rememberme()</script></div>
    <div id="rdv"></div>
    </div>
    <br />
    </div>
    </div>
    </div>
    </body>
    </html>
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #2
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh yeah the link to the page is: http://savepitbulls.8m.com/layouts/test.html
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just before the closing div tag for the container (outer div) add this
    Code:
    <div class="clear">&nbsp;</div>
    Then in your CSS add this
    Code:
    .clear {
    clear:both;
    font-size:1px;
    line-height:0px;
    }

  • #4
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added the this to my CSS:
    Code:
    .clear {
     clear:both;
     font-size:1px;
     line-height:0px;
     }
    Then I added this to my html:
    Code:
    <div class="clear">&nbsp;</div>
    And I tried it right before closing the div named "outer" and it didn't work and I tried it befor closing out the "dblck" and then the "cont" divs and it still didn't work, but this porblem only appears in netscape.
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It almost appears as if you put a height on something. Don't set a height on anything other than the header.

  • #6
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, exactly, that's the first thing I did was check to see if there was a height on anything and the only thing there is a height on is the "header" and the bar" because they both constain images that are made to fit in that are, but everything else is open, my two codes are posted up there, and I did try your solution so it's the same code but with your solution now and it's annoying me, LoL. It's weird how it works fine in IE but not in Netscape, I think IE might cut you a little more slack on the coding though, but i'm confused as to why it won't work, LoL.
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    IE resizes its containing elements height to fit its content so basically it ignores heights unless the content fills less than the height which is why it appears to work in IE. Other browsers however don't do this. Your looks a bit messy to me. Numerous brs, bad naming. It looks like you have a case of divitis. That clearing div goes somewhere but just reading through your code is giving me a headache.

  • #8
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah I know, LoL, it's a test version and it worked great in all browsers and showed up fine until I tried adding the divs inside the large right side div. The #dblck, #rdv, and #ldv are the new ones I added when it started messing up. Basically the #dblck is the conatiner div for the #ldv[left div], and the #rdv [right div]. I'm just messing around with this for now until i can get it to work right that's why it's sloppy coding but it worked until i added that stuff, thanx for answering me though ;-) Now, I just gotta get it to work, haha.
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #9
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what other options are there to space stuff out than <br> and <p> and i'm not really a fan of using the <p> unless i'm typing paragraphs.
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #10
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh yeah, and the part that confuses me is this is a free template I got offline, excluding the 3 divs I added, and if you look all the divs are closed out when there supposed to be except the #outer one which is closed out at the bottom, but yet right above it there are like 4 </div>'s and they don't appear to be closing anything out, because everythign has already been closed out, could that be it, or if I remove them do you think it will mess it up worse than it is? if that's possible...
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #11
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    actually, I take that back, all the divs are closed out fine, my bad, I missed a couple the first time.
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by boxxer03
    what other options are there to space stuff out than <br> and <p> and i'm not really a fan of using the <p> unless i'm typing paragraphs.
    Margin and padding. Okay this what you should do. Start back before you added the stuff to the right div. Add one div at a time. Float your shoutbox, then put in your right div and add clear:both; after those divs. Don't use too many divs. Divs will stack up on top of each other no need to put EVERYTHING in a div. I view the page, did you just make the height of the container wide enough to fit the layout?

  • #13
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it to work, earlier I took the float:left out of the #rdv and it works fine with your .clear code. There's no padding or margions around the main container that's why it's right up against the window on the top and the bottom. Like I said it's a test page, LoL, a long ways away from being a real on, but I just couldn't get those 2 divs to work for anything and all it was was the float left in the #rdv. Thanx for your help though. I'm gonna go through the code like you said anyways, and clean it up, but we got over the major hurdle. Thanx alot!
    I'm only telling you how I would do it, not how its supposed to be done. ;)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •