0

I have 3 horizontal floating divs with different background colors inside a parent div. I'm trying to find the best way to have the 3 divs background color fill in the parent div without setting the height exact height of the 3 child divs(if thats possible).

Here my style and code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style type="text/css">
        #packages
        {
            margin: 0 auto;
            padding: 0;
            border: 1px solid rgb(148, 183, 65);
            width: 65%;
            font-size: 70%;
            font-family: Verdana, Geneva, sans-serif;
            text-align: center;
            float: left;
            position: relative;
            overflow: hidden auto;
        }


        .basic
        {
            padding: 1em 0 1em 0;
        }

        .silver
        {
            background-color: #dfedbd;
            max-height: 100%;
            margin: 0;
            padding: 0;
            width: 33.3%;
            max-height: 100%;
            float: left;

        }

            .silver a
            {
                color: rgb(148, 183, 65);
            }

        .gold
        {
            background-color: #bbd57c;
            width: 33.3%;
            float: left;
            margin: 0;
            padding: 0;
        }

            .gold a
            {
                color: rgb(0, 128, 0);
            }


        .platinum
        {
            background-color: #94b741;
            width: 33.3%;
            float: left;
            margin: 0;
            padding: 0;
        }

            .platinum a
            {
                color: rgb(255, 255, 255);
            }

        .exec
        {
            clear: both;
            width: 100%;
            padding: 1em 0 1em 0;
            background-color: #0aa244;
            text-align: center;
            color: rgb(255, 255, 255);
        }

            .exec a
            {
                color: rgb(255, 255, 255);
            }
    </style>

</head>
<body>
    <section id="packages">

        <div class="basic">
            <strong>Basic Listing:</strong> Title, Address, Phone, E-mail to Friend, Add to Favorites - 
            <a title="Sign Up!" href="/free-listing.html"><strong>FREE</strong></a>
        </div>

        <div class="silver">
            <h3><strong>Silver Listing</strong></h3>
            <p>Silver level listings appear in search results above Basic Free listings.&nbsp;</p>
            <p><strong>$200.00 per year</strong></p>
            <p>
                <span>
                    <a title="Select >>" href="#">
                        <span>
                            <strong>SELECT &gt;&gt;</strong>
                        </span>
                    </a>
                </span>
            </p>
        </div>

        <div class="gold">
            <h3><strong>Gold Listing</strong></h3>
            <p>Gold level listings appear in search results above Silver and Basic Free listings.&nbsp;</p>
            <p><strong>$500.00 per year</strong></p>
            <p>
                <a title="Select >>" href="#"><span>
                    <span>
                        <strong>SELECT &gt;&gt;</strong>
                    </span></span></a>
            </p>

        </div>

        <div class="platinum">
            <h3><strong>Platinum Listing</strong></h3>
            <p>Platinum level listings appear in search results above Gold, Silver and Basic Free listings.&nbsp;</p>
            <p>
                <strong>Contains Detail View and Summary View
                </strong>
            </p>
            <p><strong>$1000.00 per yea</strong><strong>r</strong></p>
            <p>
                <span>
                    <a title="SELECT >>" href="#">
                        <span>
                            <span>
                                <strong>SELECT &gt;&gt;</strong></span></span></a></span>
            </p>

        </div>



        <div class="exec">
            <h3><span><strong>Executive Listing:</strong></span></h3>
            <p><span>All Features of the PLATINUM LISTING<strong></strong>, PLUS &nbsp;many extra fields and contact info!</span></p>
            <p><span><strong>$2000.00 per year</strong></span></p>
            <p>
                <span><strong><a title="Select!" href="#">SELECT Listing Type "EXECUTIVE" during Checkout &gt;&gt;</a>
                </strong>
                </span>
            </p>
        </div>


    </section>
Niall C.
  • 10,878
  • 7
  • 69
  • 61
user3075947
  • 1

1 Answers1

0

Do you mean the background color of the isn't coming all the way past the div's . I usually need to add a clear after floating item in a tag in order to get the background to show.

Add this to your style sheet.

.clear { clear: both; }

Then add this before your closing tag.

<div class="clear"></div>

If I understand correctly that should allow the background of the section to be behind all three boxes not matter the size.

Niall C.
  • 10,878
  • 7
  • 69
  • 61
David
  • 11
  • 2
  • I wish I could attach a picture. I don't need the parent div's bg color, but instead I need the 3 horizontal inner floating divs to touch the bottom full length div (each a differnt color). I was looking for a the best way to bring the 3 down without setting the bottom margin or div height (unless that is the only way) thanks – user3075947 Dec 06 '13 at 22:08