Thread: CSS Guru test

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    30
    Rep Power
    12

    CSS Guru test


    I have a complex, graphically section of a page that I would like to build using CSS instead of tables within tables within tables. Below is an image of what I am trying to build with CSS:

    Linky

    (Keep in mind this is just a section of the page, not the complete page.) This portion of the page houses the main content, and therefore needs to be able to dynamically expand vertically if I decide to add more or less text.

    I was thinking about doing this using a container DIV with the following properties:

    .body {
    background-color: #CCCCCC;
    overflow: visible;
    position: absolute;
    padding: 5px;
    width: 730px;
    left: 10px;
    top: 10px;
    border-top: 0px solid #999999;
    border-right: 2px solid #999999;
    border-bottom: 0px solid #999999;
    border-left: 2px solid #999999;
    }

    As for the embedded DIV, I am at a loss about how to do this. I know that I will need to use images for the four rounded edges, but I don't have the slightest clue about how to position these elements, especially considering how it has to scale depending on the text.

    My experiment with embedded DIVs did not work out, as I get this when displayed in a browser:

    Linky

    Below is the source for this error:

    <style type="text/css">
    <!--
    .dad {
    background: gray;
    width: 400px;
    left: 20px;
    top: 20px;
    position: absolute;
    }
    .son {
    padding: 4px;
    overflow: visible;
    background: silver;
    height: 96px;
    width: 396px;
    left: 2px;
    top: 2px;
    position: absolute;
    }
    -->
    </style>
    </head>

    <body>

    <div class="dad">&nbsp;
    <div class="son"><p>The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. The lazy brown fox jumps over the dog. </p></div>
    </div>

    </body>


    Obviously, the problem is that the container DIV does not scale depending on the size of the embedded DIV. Is it possible to establish this relationship so that the container scales with the internal DIV?

    THANKS!!!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    30
    Rep Power
    12
    bump
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Code:
    .dad {
    border: 2px solid blue;
    padding: 5px;
    /*border and padding added for clarity*/
    width: 400px;
    left: 20px;
    top: 20px;
    position: absolute;
    }
    
    .son {
    border: 2px solid red;
    /*border added for clarity*/
    padding: 4px;
    left: 2px;
    top: 2px;
    }
    Is this what you want?

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo