View Full Version : Div's inside Divs. Major Problem

Oct 29th, 2009, 04:29 AM
Hi guys,

I have NO idea why this is happening. I have done this many times before and it has almost always worked.

I am thinking I might be missing something that I just can't find in the coding. I've tried to keep it as neat as possible but somethings going wrong.

Anyways I have <div class="content"> as my main div which contains everything else on the page. I then have a unordered list, then an h1, then another unordered list and finally another div.
when this second div begins it is closing the div it is inside. I have no idea why.


Hey guys so I realized that this is the version with the two different divs, the one with the black border ends in the correct place, right after the H1, howeevr the Blue bordered Div is not going to the bottom of the page.


Anyways here is my coding for HTML and CSS. And a link to the site.


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<meta name="DC.title" content="XHTML Form" />
<meta name="DC.description" content="" />
<meta name="DC.date" content="2008-" />
<meta name="DC.format" content="text/html" />
<meta name="DC.author" content="Nick Soentgerath" />
<meta name="DC.language" content="en" />
<title>Sanctum Retreat - Home</title>

<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />

<link rel="shortcut icon" href="assets/favicon.ico" />


<div class="content">

<ul class="nav1">

<li> <a href="about.html"> About</a></li>
<li> <a href="retreatteam.html"> The Retreat Team</a></li>
<li> <a href="gallery.html"> Photo Gallery</a></li>
<li> <a href="register.html"> Register</a></li>
<li> <a href="donations.html"> Donations</a></li>
<li> <a href="passes.html"> Retreat Passes</a></li>
<li> <a href="brochure.html"> Brochure</a></li>
<li> <a href="http://www.sandalsong.com"> Go to Sandal Song</a></li>


<h1 class="header">
<img src="assets/images/heading1.jpg" alt="Sanctum Retreat" title="Sanctum Reteat" id="banner" />


<div class="middle">

<ul class="nav">
<li> <img src="assets/images/fish.gif" alt="Fish" title="Fish" class="fish" /></li>

<li> <a href="index.html"> Home</a></li>
<li> <a href="contactus.html"> Contact Us</a></li>
<li> <a href="yearatglance.html"> Year At A Glance</a></li>
<li> <a href="subdiv.html"> Sub Divisions</a></li>

<li> Retreat Schedule </li>
<li> <a href="schedule/available.html"> Available </a></li>
<li> <a href="schedule/women.html"> Women's Retreat's</a></li>
<li> <a href="schedule/men.html"> Men's Retreat's</a></li>
<li> <a href="schedule/special.html"> Special Retreat's</a></li>
<li> <a href="schedule/clergy.html"> Clergy Retreat's</a></li>
<li> <a href="schedule/serenity.html"> Serenity Retreat's</a></li>


<div class="body">

<h3>Welcome To Sanctum Retreat..</h3>

<p><img src="assets/images/main.gif" alt="home" title="home" id="home"/></p>


Western Canada's newest spiritual retreat centre, located on 100 acres of mature
lush forest on the Raven River, nestled in the foothills of the Rockies.

<p>This stunning new facility opened in August 2004 and has been getting rave
reviews since.


Sanctum Retreat's website has gone through an overhaul!
We hope that this new layout will make it easier for you to find what you are
looking for and make it easier to navigate the website.
You can find links at the top of the page and on your left hand side of your screen.





html,body {margin:0; height:100%;background-color:#479688;}

div.content {width:1000px; margin:auto; margin-top: 1em; border:10px solid black; height:auto;background-color:#cce2df;}

h1.header {margin-top:0; margin-bottom:0; text-align:center; width:1000px;}

h1 a {color:#fff; font-variant:small-caps; font-family: "Courier New",Arial, sans-serif; }

ul.nav1 {margin:0 0 0 0; color:#000; text-align:center; background-color:#cce2df; }
ul.nav1 li {display:inline; border-left: 1px solid black;}
ul.nav1 li:first-child {border-left:none;}
ul.nav1 li a {color:#000; text-decoration:none; font-family:"Times", Arial, sans-serif;
padding-right:.1em; padding-left:.25em;}
ul.nav1 li a:hover {color:#555}

div.middle {width:1000px;margin:auto; background-color:#cce2df; border:12px solid black;}

ul.nav {background-color:#fff;color:#000; border:1px solid #000;
width:10em; padding-left:inherit; margin: 0 0 0 .5em; float:left;height:450px;}

ul.nav li {border: none;list-style-type: none;}
ul.nav li a {color:#000; text-decoration:none; font-family:"Times", Arial, sans-serif;}
ul.nav li a:hover {color:#555}

div.body {background-color:#fff; border:1px solid #000;margin: 0 1em 0 1em;
padding:.5em; float:right; width:760px}

img#banner {border:0;}
img.fish {margin-left:2em}
img.footimg {margin-top:.3em}
img#home {float:right; margin-left:1em; border:1px solid black}

span.private {color:#bb382e}
span.titles {font-weight:bold}

h3 {background-color:#844949; width:650px; border-style: outset}
a {color:#964747;}

The Blue border should be going to the very bottom of the page, or to at least the bottom of the content.

Can anyone see anything wrong?
It validates.

Thanks guys.

Oct 29th, 2009, 04:44 AM
Problem Solved, I didn't know that FLOATED divs are not recognized by the parent div.

If anyone else has this issue you can fix it by placing

overflow: auto

into the css of the parent div.