Div pops through parent

html output to web



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ORSCA -  Outlaw Racing Street Car Association</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css" title="default" />


<script type="text/javascript">
var staticmenuids=["staticmenu"]
var staticmenuoffsetY=[]

function getmenuoffsetY(){
	for (var i=0; i<staticmenuids.length; i++){
		var currentmenu=document.getElementById(staticmenuids[i])
	 staticmenuoffsetY.push(isNaN(parseInt(currentmenu.style.top))? 0 : parseInt(currentmenu.style.top))
	}
		initstaticmenu()
}

function initstaticmenu(){
	var iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	var topcorner=(window.pageYOffset)? window.pageYOffset : iebody.scrollTop
	for (var i=0; i<staticmenuids.length; i++)
		document.getElementById(staticmenuids[i]).style.top=topcorner+staticmenuoffsetY[i]+"px"
	setTimeout("initstaticmenu()", 100)
}

if (window.addEventListener)
window.addEventListener("load", getmenuoffsetY, false)
else if (window.attachEvent)
window.attachEvent("onload", getmenuoffsetY)

</script>
</head>
<body>
<div id="container">
    <div id="top"></div>

    <div id="main-container">
        <div id="main-nav">
        	<a id="news" href="#" title="news"><span>News</span></a>
			<a id="forums" href="#" title="forums"><span>Forums</span></a>
			<a id="classifieds" href="http://www.racingjunk.com" target="_blank" title="classifieds"><span>Classifieds</span></a>
			<a id="raceschedule" href="index.php?page=calendar" title="raceschedule"><span>Race Schedule</span></a>
			<a id="rulebooks" href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a>

			<a id="standings" href="index.php?page=standings" title="standings"><span>Standings</span></a>
			<a id="records" href="#" title="records"><span>Records</span></a>
			<a id="photogallery" href="http://prophotoproductions.exposuremanager.com/g/drag_racing" target="_blank" title="photogallery"><span>Photo Gallery</span></a>
			<a id="racerprofile" href="#" title="racerprofile"><span>Racer Profile</span></a>
        </div>
        <div id="main-content-holder">

            
<div id="content">

<div id="calholder">
<FORM name="chooseyear" class="chooser">
<select name="menu2" onchange="window.location=this.options[this.selectedIndex].value;">

<option value="index.php?page=calendar&month=2&year=2009">2009
<option SELECTED value="index.php?page=calendar&month=2&year=2010">2010
<option value="index.php?page=calendar&month=2&year=2011">2011


</SELECT>
</FORM>

<FORM name="choosemonth" class="chooser">
<select name="menu1" onchange="window.location=this.options[this.selectedIndex].value;">

<option value="index.php?page=calendar&month=1&year=2010">January

<option value="index.php?page=calendar&month=2&year=2010">February
<option value="index.php?page=calendar&month=3&year=2010">March
<option value="index.php?page=calendar&month=4&year=2010">April
<option value="index.php?page=calendar&month=5&year=2010">May
<option value="index.php?page=calendar&month=6&year=2010">June
<option value="index.php?page=calendar&month=7&year=2010">July
<option value="index.php?page=calendar&month=8&year=2010">August
<option value="index.php?page=calendar&month=9&year=2010">September
<option value="index.php?page=calendar&month=10&year=2010">October
<option value="index.php?page=calendar&month=11&year=2010">November
<option value="index.php?page=calendar&month=12&year=2010">December




</SELECT>
</FORM>
<div id="calendar">


<div id="month">February 2010</div>

<div class="weekend">sun</div>
<div class="weekday">mon</div>
<div class="weekday">tue</div>
<div class="weekday">wed</div>
<div class="weekday">thu</div>
<div class="weekday">fri</div>
<div class="weekend">sat</div>
<div class="weekday"></div>
<div class="weekday">1</div>

<div class="weekday">2</div>
<div class="weekday">3</div>
<div class="weekday">4</div>
<div class="weekday">5</div>
<div class="weekend">6</div>
<div class="weekend">7</div>
<div class="weekday">8</div>
<div class="weekday">9</div>
<div class="weekday">10</div>

<div class="weekday">11</div>
<div class="eventday4">12</div>
<div class="eventday4">13</div>
<div class="eventday2">14</div>
<div class="weekday">15</div>
<div class="weekday">16</div>
<div class="weekday">17</div>
<div class="weekday">18</div>
<div class="weekday">19</div>

<div class="weekend">20</div>
<div class="weekend">21</div>
<div class="weekday">22</div>
<div class="weekday">23</div>
<div class="weekday">24</div>
<div class="weekday">25</div>
<div class="weekday">26</div>
<div class="weekend">27</div>
<div class="weekend">28</div>

<div class="event"><img src="images/test.jpg" width="200px" align="left" />February 12-14th, 2010</div>
<div class="event"><img src="images/flyer.jpg" width="200px" align="left" />February 12, 2010</div></div></div></div>
        </div>


        <div id="sponsors">
<object width="698" height="183">
<param name="movie" value="images/sponsors.swf">
<embed src="images/sponsors.swf" width="698" height="183">
</embed>
</object>
        </div>

        <div id="main-classes"> <img src="http://berryequipment.net/orsca/images/autopromod.png" /> <a href="http://www.southerndieselperformance.com/" target="_blank"><img src="http://berryequipment.net/orsca/images/stp.png" border="0" /></a> </div>
    </div>
</div>
</body>
</html>

css


html {min-width:999px;}
body {
min-width:999px;    margin: 0px;
    padding: 0px;
    background: #000000 url(http://berryequipment.net/orsca/images/repeatbg2.jpg) repeat-y 50&#37; 0;
}
#container {
    text-align: center;
    width: 100%;
    background: url(http://berryequipment.net/orsca/images/mainbg.jpg) no-repeat 50% 108px;
}
#top {
    text-align: center;
    min-width: 999px;
    height: 108px;
    background: #000 url(http://berryequipment.net/orsca/images/topbg.jpg);
}
#main-container {
    position: relative;
    width: 1001px;
    min-height: 784px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#main-nav {
    position: relative;
    margin-top: 48px;
    margin-left: 12px;
    width: 982px;
    height:58px;
    background-color: #434222;
}



#news
{
  float: left;
  display: block;
  width: 94px;
  height: 58px;
  background: url("../images/nav/news.jpg") no-repeat 0 0;
}
#news:hover
{ 
  background-position: 0 -58px;
}
#news span
{
  display: none;
}

#forums
{
  float: left;
  display: block;
  width: 79px;
  height: 58px;
  background: url("../images/nav/forums.jpg") no-repeat 0 0;
}
#forums:hover
{ 
  background-position: 0 -58px;
}
#forums span
{
  display: none;
}

#classifieds
{
  float: left;
  display: block;
  width: 106px;
  height: 58px;
  background: url("../images/nav/classifieds.jpg") no-repeat 0 0;
}
#classifieds:hover
{ 
  background-position: 0 -58px;
}
#classifieds span
{
  display: none;
}

#raceschedule
{
  float: left;
  display: block;
  width: 127px;
  height: 58px;
  background: url("../images/nav/raceschedule.jpg") no-repeat 0 0;
}
#raceschedule:hover
{ 
  background-position: 0 -58px;
}
#raceschedule span
{
  display: none;
}

#rulebooks
{
  float: left;
  display: block;
  width: 105px;
  height: 58px;
  background: url("../images/nav/rulebooks.jpg") no-repeat 0 0;
}
#rulebooks:hover
{ 
  background-position: 0 -58px;
}
#rulebooks span
{
  display: none;
}

#standings
{
  float: left;
  display: block;
  width: 96px;
  height: 58px;
  background: url("../images/nav/standings.jpg") no-repeat 0 0;
}
#standings:hover
{ 
  background-position: 0 -58px;
}
#standings span
{
  display: none;
}

#records
{
  float: left;
  display: block;
  width: 86px;
  height: 58px;
  background: url("../images/nav/records.jpg") no-repeat 0 0;
}
#records:hover
{ 
  background-position: 0 -58px;
}
#records span
{
  display: none;
}

#photogallery
{
  float: left;
  display: block;
  width: 125px;
  height: 58px;
  background: url("../images/nav/photogallery.jpg") no-repeat 0 0;
}
#photogallery:hover
{ 
  background-position: 0 -58px;
}
#photogallery span
{
  display: none;
}

#racerprofile
{
  float: left;
  display: block;
  width: 164px;
  height: 58px;
  background: url("../images/nav/racerprofile.jpg") no-repeat 0 0;
}
#racerprofile:hover
{ 
  background-position: 0 -58px;
}
#racerprofile span
{
  display: none;
}



#main-content-holder {
    position: relative;
    margin-top: 0px;
    width: 758px;
    background:url(../images/repeatbg.jpg) repeat-y 0 0;
}
#content { 
padding: 10px;
    color: #FFF;
    width: 738px;
    text-align: left;
    background: url(../images/contentbgtop.jpg) no-repeat;
    min-height: 678px;
}
#home_content1 {
    color: #FFF;
    width: 758px;
    height: 391px;
    background: url(../images/home_contentbg1.jpg);
}
#home_content2 {
    width: 758px;
    height: 305px;
    background: url(../images/home_contentbg2.jpg);
}
#sponsors {
    margin-top: 55px;
    padding-top: 41px;
    text-align: center;
    width: 758px;
    height: 225px;
    background: url(../images/sponsors.png) no-repeat;
}

#main-classes {
    position: absolute;
    top: 150px;
    left: 797px;
    width: 203px;
    height: 626px;
}

#calholder {
width: 738px;
text-align: left;
}

#calendar {
width: 455px;
text-align: left;
}

#month {
margin-left: 40px;
font: 2em Trebuchet MS, sans-serif; line-height: 1.25; color: #FFF;
display: block;
}

.weekday {
color: #FFF;
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}

.weekend {
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #800000;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}

.eventday1 {
background: url(../images/event1.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.eventday2 {
background: url(../images/event2.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.eventday3 {
background: url(../images/event3.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.eventday4 {
background: url(../images/event4.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}
.eventday5 {
background: url(../images/event5.jpg);
margin-left: 20px;
text-align: center;
font: 1.125em Lucida Sans Unicode, sans-serif; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}

.chooser {
float: right;
margin-right: 10px;
margin-top: 10px;
}








#rules {
margin-top: 0px;
margin-left: 200px;
width: 500px;
}


.wireframemenu{
border: 1px solid #282828;
background-color: #202020;
border-bottom-width: 0;
width: 170px;
position: absolute;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #303030;
}

.wireframemenu a:visited{
color: #FFFFFF;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #181818;
color: #FFF;
}


 img, div { behavior: url(../iepngfix.htc) }
 
.event {
padding: 20px;
width: 500px;
background-color: #FFF;
float: left;
position: relative;
}


my event class divs are inside the content div. They are popping out the bottom of it though, the content div isn’t expanding to hold the event divs.
http://www.berryequipment.net/orsca/index.php?page=calendar
Put a white background behind the event divs to make it easy to see.

This is happening in FF3.5, IE8, Safari. It works correctly in IE5.5, 6, and 7… go figure.

does putting overflow:hidden on #main-content-holder works for you?

Yup thanks :wink:

You’re welcome :slight_smile: