CSS Forum

**Therion** · 01-12-2008, 05:30 PM

Here's my problem: I want this webpage to have sort of a goldenrod background, but to have a block of it be in a white background. The block I want is the div with ID mainimage. However, this div does not expand to cover the nested div within it that has ID maintext. Any help would be very appreciated.

Here's the code:

Code:

<!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>

    <title>Coach for Cancer Overview</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    /*onload=function() {
        var textHeight = document.getElementById("maintext").offsetHeight;
        var textTop = document.getElementById("maintext").style.top;
        var height = textHeight+textTop
        document.getElementById("mainimage").style.height=height + "px";
    }*/
    </script>

    <style type="text/css">

    body {

        background:#ffcb00;

        }

    .absolute {

        position:absolute;
        display:block;

        }

    #navtop {

        position:relative;

        text-align:center;

        margin-left:auto;

        margin-right:auto;

        }

    #navtop td {

        width:88px;

        border:2px ridge #000000;

        padding:8px;

        }

    #maincontent {
        display:table;

        width:770px;

        margin-left:auto;

        margin-right:auto;

        }

    #maincontent #leftnav {

        float:left;

        text-align:center;

        width:120px;

        border:2px ridge #000000;

        padding: 8px;

        margin-top:36px;

        }

    #maincontent #leftnav .previous {

        float:left;

        }

    #maincontent #leftnav .next {

        float:right;

        }

    #maincontent #mainimage {

        display:table;

        margin-left:10px;
        width:620px;
        background:white;

        }

    #maincontent #mainimage img {

        width:620px;

        }

    #maincontent #mainimage #maintext {

        width:384px;

        position:absolute;

        top:72px;

        left:330px;

        font-family:arial;

        font-size:14px;

        }

    #maincontent #mainimage #maintext h2 {

        text-align:center;

        font-family:arial;

        font-size:18px;

        }

    </style>

</head>



<body>

    <table id="navtop">

    <tr>

        <td>

            <a href="home.htm">Home</a>

        </td>

        <td>

            <a href="coaching.htm">Coaching<br />

            Program</a>

        </td>

        <td>

            <a href="resources.htm">Cancer<br />

            Resources</a>

        </td>

        <td>

            <a href="publications.htm">Publications</a>

        </td>

        <td>

            <a href="blog.htm">Blog</a>

        </td>

        <td>

            <a href="contact.htm">Contact<br />

            Us</a>

        </td>

        <td>

            <a href="new.htm">What's<br />

            New</a>

        </td>

    </tr>

    </table>

    <div id="maincontent">

    <div class="absolute">

    <div id="leftnav">

        <p><a href="home.htm">Overview</a></p>

        <p><a href="objective.htm">Objective</a></p>

        <p><a href="founder.htm">Founder</a></p>

        <p class="next"><a href="objective.htm">Next</a></p>

        <p>&nbsp;</p>

    </div>

    <div id="mainimage">

        <img src="Overview.jpg" alt="Surviving Cancer is One Tough Journey" />

        <div id="maintext">

            <ul>

                <li>Surviving cancer requires your proactive participation. Your cancer team will play offense and do everything possible to work with you to beat the cancer. You must now play the best game of defense you have ever played to help your body endure and survive the abusive toxic treatment will inflicted.</li>

                <li>If you ever needed a cause to rally for and participate in, this is it. More patients survive cancer today than ever before and you want to be one of them. The challenge is to do your best to arm yourself to not just survive the cancer treatment but to live through it and become stronger.</li>

            </ul>

            <h2>What You Need to Fight the Battle</h2>

            <ul>

                <li>A survivor's attitude to challenge a formidable enemy that is relentless.</li>

                <li>The perspective to realize you are Not sick - you just have cancer.</li>

                <li>The strength to calm the fear of cancer and understand you do have choices.</li>

                <li>An otherwise healthy body in which you do everything to keep it healthy.</li>

                <li>The courage to challenge the doctors and staff and ask questions so you become a knowledgeable participant and not a victim.</li>

                <li>A proactive role to defeat the cancer.</li>

                <li>The belief you can win this fight. </li>

            </ul>
        </div>

    </div>

    </div>

    </div>

</body>

</html>

**LadynRed** · 01-12-2008, 05:59 PM

The biggest problem you have is the position:absolute on everything.. not a good idea and should be avoided. Use to learn the normal document flow and floats and you'll have less problems.

**Therion** · 01-12-2008, 06:34 PM

Thank you very much. Changing the maintext div to relative positioning, then changing top and left to margin-top and margin-left and messing with those values did the trick.