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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div's inside Divs. Major Problem

    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.

    ****EDIT*****

    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.

    ***/EDIT*****


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

    http://www.sanctumretreat.ca/sanctum/index.html

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    
    <!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>
    
     <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" />
    </head>
    
    
       <body>
    
    
    
    
    	<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>
    
    
    </ul>
    
    
    <h1 class="header">
    <img src="assets/images/heading1.jpg" alt="Sanctum Retreat" title="Sanctum Reteat" id="banner" />
    </h1>
    
    
    </div>
    
    <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>
    
    
      </ul>
    
    
    
     <div class="body">
    
    
    <h3>Welcome To Sanctum Retreat..</h3>
    
    <p><img src="assets/images/main.gif" alt="home" title="home" id="home"/></p>
    
    <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>
    
    
    <p>This stunning new facility opened in August 2004 and has been getting rave 
    reviews since. 
    </p>
    
    
    <p>
    
    Sanctum Retreat's website has gone through an overhaul!
    </p>
    <p>
    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.
    </p>
    <p>
    You can find links at the top of the page and on your left hand side of your screen.
    </p>
    <p>
    Enjoy!
    </p>
    
    
    
    </div>
    
    
    </div>
    
    
    
    
    
    
      </body>
      </html>
    CSS

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

  • #2
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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