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

    Join Date
    Jun 2003
    Posts
    30
    Rep Power
    11

    CSS question: DIVs within DIVs possible?


    Is it possible to put a DIV within a DIV? I have a complex layout that will require a background DIV, and then multiple superimposed DIVs on top. It would be easy for me to just use absolute layout and z-index layering, but the problem is I need the background DIV to wrap around all the inside DIVs. In english: I need the background DIV to scale depending on the text withing the embedded DIVs. If that makes any sense. I tried testing embedded DIVs in IE and Mozilla but nothing happened. Is there an alternative to this? I don't really want to use HTML tables within DIVs... kinda makes the whole CSS positioning thing kinda worthless.

    Here's my source:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    body {
    margin: 0px;
    padding: 0px;
    }
    .background {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 700px;
    background-color: #CCCCCC;
    border-top: 0px none;
    border-right: 2px solid #999999;
    border-bottom: 0px none;
    border-left: 2px solid #999999;
    }
    .announcement {
    position: absolute;
    left: 30px;
    top: 30px;
    border: 0px;
    width: 650px;
    background-color: #99FF00;
    }
    -->
    </style>
    </head>

    <body>

    <div class="background">
    <div class="annoucement">This is the annoucement.</div>
    </div>

    </body>
    </html>
    Last edited by phatnadz; August 24th, 2003 at 09:01 AM.
  2. #2
  3. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    yeah, from what im aware of, it should work, but just be careful when you put more than 3 divs within a 'parent' div, cuz thats where you start to lose track of your ending tags(</div>).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    14
    'announcement'
    versus
    'annoucement'

    Oops (bloody typos)!

    Hope this helps,
    Jeroen

IMN logo majestic logo threadwatch logo seochat tools logo