61 users online (1 members and 60 guests)  


  Results 1 to 6 of 6

Related

  1. 100% Height on nested DIVs?    Forum: CSS Forum
    Replies: 3
  2. Variable width nested divs    Forum: CSS Forum
    Replies: 0
  3. nested divs in mozilla...    Forum: CSS Forum
    Replies: 2
  4. CSS Positioning and nested Div's    Forum: CSS Forum
    Replies: 1
  5. Nested Divs instead of table    Forum: CSS Forum
    Replies: 1
  1. #1
    Navanax's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2005
    Posts
    4

    Nested Div question

    Hi. I'm kind of new to CSS, getting the hang of it. But I'm really wondering why I can't get a specific thing to work at the moment.

    I'm trying to create a parent Div (which should be used for positioning and size only) with one or more child Divs with actual content.

    I've tried tons of stuff, and the idea itself looks simple enough, but it just won't look right. Here's an image of what I want it to look like:

    http://img425.imageshack.us/my.php?image=blockdesign6di.jpg
    If anyone could help me out with some advice or whatever, that'd be great

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Nested Div question

    Hi there Navanax,
    and a warm welcome to these forums.
    Have a look at this example, it may give you some ideas and further your CSS skills...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>basic layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Style-Type" content="text/css"/>
    <style type="text/css">
    <!--
    body {
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:18px;
    color:#000;
    background-color:#fff;
    }
    #container {
    width:758px;
    border:1px solid #000;
    margin:auto;
    }
    #content {
    height:428px;
    padding-top:10px;
    border:1px solid #000;
    margin:2px;
    margin-bottom:0px;
    overflow:auto;
    }
    #content p {
    color:#000;
    text-align:justify;
    background-color:#fff;
    margin:10px 20px;
    }     
    #buttons {
    height:48px;
    line-height:48px;  /*this will vertically align a single line of text*/
    color:#fff;
    text-align:center;
    background-color:#666;
    border:1px solid #000;
    border-top-width:0px;
    margin:2px;
    margin-top:0px;
    }   
    -->
    </style>
    </head>
    <body>
    <div id="container">
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. 
    Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti 
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. 
    Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
    nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt 
    turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, 
    accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing, 
    est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
    </p>
    <p> 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed 
    cursus feugiat mauris. Aenean pharetra purus a augue varius gravida. Aliquam gravida nibh ut nunc. 
    Integer tortor risus, posuere eget, rutrum non, semper a, tellus. Phasellus faucibus, elit nec egestas 
    adipiscing, sapien sapien lacinia nulla, et bibendum metus neque fermentum sapien. Etiam ante dui, 
    tincidunt ac, auctor eu, aliquet non, velit. Mauris enim libero, malesuada at, dignissim vitae, lobortis ut, 
    enim. Sed porttitor consequat eros. Morbi nec risus vitae diam sodales accumsan. Praesent ultrices
    magna sit amet enim. Proin convallis ipsum non dolor. Donec eu tellus. Nam ut magna.
    </p>
    <p> 
    Phasellus sit amet ipsum. Pellentesque odio purus, dapibus in, convallis sit amet, ornare quis, neque. 
    Suspendisse lorem odio, congue a, rhoncus quis, dignissim id, enim. Nunc elementum orci. Etiam 
    fermentum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam aliquet tellus at lectus. 
    Mauris urna nisl, mollis id, vehicula in, tempor nec, odio. Aliquam auctor egestas enim. Donec tincidunt 
    orci et risus. Proin pulvinar.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit 
    venenatis purus. Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent 
    taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. 
    Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc. 
    Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt turpis. 
    Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, accumsan vel, 
    ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing, est orci adipiscing 
    felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna. 
    </p>
    </div>
    <div id="buttons">Buttons</div>
    </div>
    </body>
    </html>

  3. #3
    Navanax's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2005
    Posts
    4

    Re: Nested Div question

    Thanks, that looks like what I wanted.
    However, my parent div doesn't have a set height, but the child divs should adapt to the parent's height. As far as I know, the only way to do that in CSS is by percentages, but that might not look right in my case.
    I might have a possible solution though, thanks to your example

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Nested Div question

    Hi there Navanax,
    here is a more fluid example,
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>basic layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Style-Type" content="text/css"/>
    <style type="text/css">
    <!--
    html,body {
    height:99%;
    margin:0%;
    padding:0%;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:18px;
    color:#000;
    background-color:#fff;
    }
    #container {
    width:758px;
    padding:2px;
    height:100%;
    border:1px solid #000;
    margin:4px auto;
    }
    #content {
    height:75%;
    overflow:auto;
    }
    #content p {
    color:#000;
    text-align:justify;
    background-color:#fff;
    margin:10px 20px;
    }     
    #buttons {
    height:25%;
    color:#fff;
    text-align:center;
    background-color:#666;
    } 
    #buttons p {
    margin:0%;
    padding-top:20px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. 
    Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti 
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. 
    Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
    nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt 
    turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, 
    accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing, 
    est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
    </p>
    <p> 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed 
    cursus feugiat mauris. Aenean pharetra purus a augue varius gravida. Aliquam gravida nibh ut nunc. 
    Integer tortor risus, posuere eget, rutrum non, semper a, tellus. Phasellus faucibus, elit nec egestas 
    adipiscing, sapien sapien lacinia nulla, et bibendum metus neque fermentum sapien. Etiam ante dui, 
    tincidunt ac, auctor eu, aliquet non, velit. Mauris enim libero, malesuada at, dignissim vitae, lobortis ut, 
    enim. Sed porttitor consequat eros. Morbi nec risus vitae diam sodales accumsan. Praesent ultrices
    magna sit amet enim. Proin convallis ipsum non dolor. Donec eu tellus. Nam ut magna.
    </p>
    <p> 
    Phasellus sit amet ipsum. Pellentesque odio purus, dapibus in, convallis sit amet, ornare quis, neque. 
    Suspendisse lorem odio, congue a, rhoncus quis, dignissim id, enim. Nunc elementum orci. Etiam 
    fermentum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam aliquet tellus at lectus. 
    Mauris urna nisl, mollis id, vehicula in, tempor nec, odio. Aliquam auctor egestas enim. Donec tincidunt 
    orci et risus. Proin pulvinar.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit 
    venenatis purus. Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent 
    taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. 
    Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc. 
    Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt turpis. 
    Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, accumsan vel, 
    ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing, est orci adipiscing 
    felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna. 
    </p>
    </div>
    <div id="buttons"><p>Buttons</p></div>
    </div>
    </body>
    </html>

  5. #5
    Navanax's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2005
    Posts
    4

    Re: Nested Div question

    Hmm, the use of percentages turned out to look pretty good, so I've decided to use that approach after all.
    Thanks again.

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Nested Div question

    No problem, you're welcome.



Tags for this Thread