Author Topic: containment issue  (Read 1995 times)


  • Guest
containment issue
« on: July 14, 2013, 02:06:21 am »
I got the dragons to go exactly where I want them, without interfering with the content area of the web site.The only problem that I ma now having is that there is a massive balck area directly below the footer sections. I realize that this is happening due to the two dragon images, and therefore tried to move the dragon divs higher up. This only cuased more problems. I have no idea what to do!

Anyway, I uploaded the files and you can view the page here-


Is there a way to get rid of that extra space at the bottom of the page?


  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: containment issue
« Reply #1 on: July 14, 2013, 01:42:55 pm »
Hmmm, well I played with a bit and I got it to work, but it is going to require quite a few changes the HTML and CSS:

You have to start by creating a new <div> that will hold the head, tail and content div. The head and tail divs need to be moved above the content div:

<div style="margin: 0px auto; width: 790px;">

<div id="dg-head">
<img src="images/dg_head.png">
</div> <!-- end head-->

<div id="dg-tail">
<img src="images/dg_tail.png">
</div> <!-- end tail -->

<div id="content">
<div id="text">

<p></p><h1>Digital Magic</h1><p></p>

<p>Need a site that meets your needs? One that is easy to update yourself, but also powerful enough to win over your competition? Then you've found the right man for the job! Feel free to check out my work and ask for a quote using the contact page.</p>

<p>Below, you will see my recent works with both the web and illustrations.</p>



<div id="about">

<p></p><h1>About Digital Magic</h1><p></p>

<p>Digital Magic, founded by Nathan Swartz (27) is a privately run web design studio. Nathan specializes in graphic and web design, including flash, design, and developmental languages such as PHP, JavaScript, XHTML, CSS, and others. Nathan is also well diversed in CMS programs such as Joomla, Wordpress, PHPbb, and CakePHP.</p>

<p>Nathan Will not settle for less than satisfactory. He will pin point every error and correct them until they all validate properly. Nathan will work hard to ensure that your site will beat your competitors and boost your market.</p>

<p>Nathan ensures strict XHTML encoding and proper CSS for fast loading, and also ensures to balance content and design for the sake of usability and optimal speed. Nathan also ensures that every resolution will view your site the same. We will not strand any user from veiwing your web site!</p>


<div id="gal-sample">
<p></p><h1>Recent Projects</h1><p></p>

<img class="gallery" src="images/p1.jpg">
<img class="gallery" src="images/p2.jpg">
<img class="gallery" src="images/p3.jpg">




Here are the CSS changes:

#dg-head {
    bottom: 0;
    float: right;
    left: 1092px;
    position: absolute;
    z-index: 2;

#dg-tail {
    bottom: -70px;
    float: left;
    position: absolute;
    right: 879px;
    z-index: 1;

#content {
    background: url("../images/con-bg.jpg") repeat scroll 0 0 transparent;
    border: 2px solid #000000;
    border-radius: 5px 5px 5px 5px;
    height: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    width: 790px;
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty


  • Guest
Re: containment issue
« Reply #2 on: July 14, 2013, 08:17:00 pm »
I tried your solution, however it would not work for me. When I resized the browser the head and tail were all over the page, but stayed away from the content area. They became "detached" from the content box. :(


  • Guest
Re: containment issue
« Reply #3 on: July 14, 2013, 08:40:09 pm »
I just went back and tried a few things. Seems like no matter where I put the dragons div tags will ush something down. For now I just made the div have the background wth the image with css, rather than linking the image through the html file. Still no luck though :(


  • Guest
Re: containment issue
« Reply #4 on: July 15, 2013, 01:03:02 am »
Ok, I think I found a good fix. I had to create another image and then use that image right between the closing content div and above the opening footer div. I then used a series of breaks, which closed in the large gap that was at the bottom below the footer. It isn't exactly what I was hoping for, but I do think it looks good. I think I may just keep it as is. What do you think?

Thanks for all the help Erikk and Jenna!