...

View Full Version : divs breaking out of divs :-(



boxxer03
11-26-2005, 12:13 AM
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:

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:

<!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>

boxxer03
11-26-2005, 12:14 AM
oh yeah the link to the page is: http://savepitbulls.8m.com/layouts/test.html

_Aerospace_Eng_
11-26-2005, 12:21 AM
Just before the closing div tag for the container (outer div) add this

<div class="clear">&nbsp;</div>
Then in your CSS add this

.clear {
clear:both;
font-size:1px;
line-height:0px;
}

boxxer03
11-26-2005, 02:46 AM
I added the this to my CSS:

.clear {
clear:both;
font-size:1px;
line-height:0px;
}

Then I added this to my html:

<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.

_Aerospace_Eng_
11-26-2005, 03:02 AM
It almost appears as if you put a height on something. Don't set a height on anything other than the header.

boxxer03
11-26-2005, 06:35 AM
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.

_Aerospace_Eng_
11-26-2005, 06:50 AM
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.

boxxer03
11-26-2005, 07:00 AM
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 ;-) :thumbsup: Now, I just gotta get it to work, haha.

boxxer03
11-26-2005, 07:01 AM
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.

boxxer03
11-26-2005, 07:04 AM
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...

boxxer03
11-26-2005, 07:15 AM
actually, I take that back, all the divs are closed out fine, my bad, I missed a couple the first time.

_Aerospace_Eng_
11-26-2005, 07:25 AM
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?

boxxer03
11-26-2005, 07:46 AM
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! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum