Items busting out of bottom of div

No replies

Thu, 2009-08-20 18:09

tristan.zimmerman

Offline

newbie

Phoenix, AZ

Last seen: 12 years 51 weeks ago

Phoenix, AZ

Timezone: GMT-7

Joined: 2009-08-20

Posts: 1

Points: 0

Hi everyone,

I have been struggling with this problem for 24 hours now and I have never felt so lost before.

firstly, here is the page: http://www.brieftherapyconference.com/testing/

I have a simple set up of a div at the top for a header and a div beneath it for the content and menu. I also have added divs on either side of the header as well as on either side of the content. these simply have a background image to give the page the appearance of shadow.

I want the columns to stretch from the very top edge of the screen to the very bottom to simplify the shading effect, however I cannot get the bottom to do as I'd like.

No matter what I have done the content in the central column overflows the bottom creating a gap between the bottom of the page and the content div. Curiously, the columns containing the shadow also will stop at the same point as the content div.

I have tried setting margins and padding to 0px on the HTML tag, the Body Tag, and the containing div. I have set the length of the HTML tag, the Body tag, and all three lower divs to 100%. I have tried placing breaks with a style setting of "clear both" after every block level item on the page. I have tried more elaborate fixes adding classes and creating divs all around the page. Nothing has worked and I am absolutely stumped.

I have tried to keep my code simple and I validated it:

my html:

<!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>
 
<meta name="keywords" content="brief, therapy, psychotherapy, medical, hypnosis, convention, conference, CE, continuing education, mental health, evolution, psychiatry, psychiatrist, social, work, social work, erickson, milton, milton erickson, Milton H. Erickson, Erickson foundation, evolution of psychotherapy, counseling" />
 
<meta name="description" content="The Brief Therapy Conference, December 7-10, 2006. Hyatt Regency Orange County, (Garden Grove) Anaheim, CA.  Solicited short courses, Interactive events, Invited workshops and Keynote addresses." />
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>2010 Brief Therapy Conference</title>
 
<script src="menu/mouseovertabs.js" type="text/javascript">
 
/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (<a href="http://www.dynamicdrive.com" rel="nofollow">www.dynamicdrive.com</a>)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at <a href="http://www.dynamicdrive.com/" rel="nofollow">http://www.dynamicdrive.com/</a> for this script and 100s more
***********************************************/
 
</script>
 
<link rel="stylesheet" type="text/css" href="brieftherapy.css" />
 
</head>
 
<body>
 
<div class="container">
<div class="leftshadowheader">&nbsp;
</div>
<div class="header">
<a href="http://www.brieftherapyconference.com"><img alt="Brief Therapy Conference" class="headlogo" src="images/clock.png" /><img alt="Brief Therapy, Lasting Solutions" class="headname" src="images/brieftherapy.png" /></a>
</div>
<div class="rightshadowheader">&nbsp;
</div>
<br style="clear:both" />
<div class="leftshadowbody">&nbsp;
</div>
<div class="content">
 
<div class="menucontainer">
<div id="brieftherapymenu" class="briefmainmenu">
<ul>
<li><a style="border-right: 1px solid #ccc;" href="main.html" target="front" rel="gotsubmenu[selected]">2010 Conference</a></li>
<li><a style="border-right: 1px solid #ccc;" href="registration.html" target="front" rel="gotsubmenu">Registration</a></li>
<li><a style="border-right: 1px solid #ccc;" href="hotelandtravel.html" target="front" rel="gotsubmenu">Hotel and Travel</a></li>
<li><a style="border-right: 1px solid #ccc;" href="http://www.ericksonfoundationstore.com/" target="_blank">Shop</a></li>
<li><a style="border-right: 1px solid #ccc;" href="history.html" target="front" rel="gotsubmenu">About Us</a></li>
<li><a style="padding: 5px 36px 10px 37px;" href="downloads.html" target="front" rel="gotsubmenu">Registrants Corner</a></li>
</ul>
</div>
 
<div id="briefsubmenu" class="tabsmenucontentclass">
 
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="menu/submenu.html" style="visibility:hidden">Sub Menu contents</a>
 
</div>
 
<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("brieftherapymenu", "briefsubmenu", false)
 
</script>
</div>
 
<p><b><a href="/pdfs/bt_10_call_for_papers.pdf">CLICK HERE</a> to submit a proposal for a <a href="/pdfs/bt_10_call_for_papers.pdf">short course presentation</a>.</b></p>
 
<p><a href="http://www.erickson-foundation.org/" target="_blank">The Milton H. Erickson Foundation</a>, sponsor of</p>
<h2><a href="http://evolutionofpsychotherapy.com/" target="_blank">The Evolution of Psychotherapy</a></h2>
<p>Invites you to its 8th Brief Therapy Conference:</p>
<p>At the <a href="http://www1.hilton.com/en_US/hi/hotel/ORLDWHH-Hilton-located-in-the-WALT-DISNEY-WORLD-Resort-Florida/index.do" target="_blank">Hilton Walt Disney World</a>, December 9-12, 2010.</p>
<p>
<a href="http://www1.hilton.com/en_US/hi/hotel/ORLDWHH-Hilton-located-in-the-WALT-DISNEY-WORLD-Resort-Florida/index.do" target="_blank"><img alt="Hilton Walt Disney World" width="575px" height="435px" src="images/hiltonwaltdisneyworld.jpg" /></a></p>
<p>&copy;</p><br style="clear:both" />
</div>
<div class="rightshadowbody">&nbsp;
</div><br style="clear:both" />
 
</div>
</body>
</html>

my css:

@charset "utf-8";
/* CSS Document */
 
html {
height: 100%;
padding: 0px;
margin: 0px;
}
 
body {
background: url(images/background.png) repeat-x #cdcdcd;
margin: 0px 0px 0px 0px;
padding-top: 0px;
padding-bottom: 0px;
font-size: .8em;
height: 100%;
}
 
.container {
width: 920px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
height: 100%;
}
 
.header {
background: #cdcdcd;
width: 860px;
height: 203px;
padding: 10px 10px 10px 10px;
float: left;
margin-bottom: 15px;
}
 
.headlogo {
float: left;
border: 0px;
}
 
.headname {
float: right;
border: 0px;
}
 
.content {
width: 880px;
background: #831930;
float: left;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
padding: 0px 0px 0px 0px;
height: 100%;
text-align: center;
}
 
.content p {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
padding: 0px 0px 0px 0px;
text-align: center;
}
 
.content a{
color: #FF0;
}
 
.leftshadowheader {
background:url(images/leftshadow.png);
background-position: right;
background-repeat: repeat-y;
height: 100%;
width: 20px;
float: left;
height: 224px;
margin-bottom: 15px;
}
 
.rightshadowheader {
background:url(images/rightshadow.png);
background-position: left;
background-repeat: repeat-y;
height: 100%;
width: 20px;
float: left;
height: 224px;
margin-bottom: 15px;
}
 
.leftshadowbody {
background:url(images/leftshadow.png);
background-position: right;
background-repeat: repeat-y;
height: 100%;
width: 20px;
float: left;
}
 
.rightshadowbody {
background:url(images/rightshadow.png);
background-position: left;
background-repeat: repeat-y;
height: 100%;
width: 20px;
float: left;
}
 
.copyright {
text-align: center;
padding-top: 5px;
float:left;
clear:both;
}
 
/* Menu */
 
.briefmainmenu{
background: #831930;
width: 100%;
}
 
.briefmainmenu ul{
overflow: hidden;
margin: auto;
padding: 0px;
list-style-type: none;
}
 
.briefmainmenu li{
display: inline;
float: left;
height: 24px;
width: auto;
}
 
.briefmainmenu a{
display: block;
padding: 5px 31px 5px 31px;
background: #000;
color: #fff;
border: 0px 2px 0px 2px solid #ccc;
text-decoration: none;
font: bold 13px Arial;
}
 
.briefmainmenu a:hover, .tabsmenuclass a.selected{
background: #831930;
color: white;
border: 0px 2px 0px 2px solid #ccc;
padding: 5px 31px 10px 31px;
}
 
.menucontainer {
width: 880px;
background: #000;
float: left;
border-top: 2px solid #ccc;
border-bottom: 6px solid #ccc;
margin-bottom: 10px;
}
/* 831930 */
 
/* ######### CSS for sub menu container below ######### */
 
.tabsmenucontentclass{
clear: left;
color: #fff;
background: #000;
width: auto;
margin:auto;
height: 24px;
padding-top: 5px;
border-top: 1px solid silver;
font: bold 13px Arial;
}
 
.tabsmenucontentclass a, .tabsmenucontentclass a.visited{
color: #fff;
font: bold 13px Arial;
}
 
.tabsmenucontentclass a:hover, .tabsmenucontentclass a.selected{
color: #FF0;
font: bold 13px Arial;
}
 
.tabsmenucontentclass ul{
margin: auto;
padding: 0;
list-style-type: none;
}
 
.tabsmenucontentclass li{
float: left;
padding: 0px 10px 0px 10px;
margin: auto;
}
 
/* End Menu */

I'm sure the answer is something simple and that I have probably been using all of the wrong search terms when looking. Any help would be much appreciated.

Thank you very much.

Tags:

Beginners CSS Questions

Items busting out of bottom of div

User login

Navigation