What's with it anyway? Div inside a div

Discussion in 'HTML' started by greenflame, Aug 13, 2007.

  1. greenflame

    greenflame Guest

    ok, so here's the deal.
    I have a div, which is adjusted to 100% width and 100% height.
    I have another div inside (which is relative to it)
    Problem is that the outer div is adjusting to the height and width of
    the inner div. It's driving me mad.
    I tried to play with z-index, with overflow:hidden... nothing. maybe
    you can help me.

    (using windows xp, internet explorer if it matters)
    Here's the 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>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>Ardeo Design Studios</title>
    <style type="text/css">
    body,p,tr,td {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:17px;
    }


    ..container {
    /*z-index:1;*/
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:5px solid #ffffff;

    }

    ..bgWords {
    background-color:#99CCFF;
    font-weight:bold; font-size:36px; color:#212121;
    position:relative; top:50; left:50;
    width:50%; height:150px; line-height:30px;
    /* for IE */ filter:alpha(opacity=40);
    /* CSS3 standard */ opacity:0.4;
    /* for Mozilla */ -moz-opacity:0.4;
    /*overflow:hidden; */
    border:1px solid #ffffff;
    }
    </style>
    </head>

    <body bgcolor="#333333">
    <div class="container">

    <div class="bgWords">
    aaaa aaaa aaaa baba baba baba caca caca caca dada dada dada eaea eaea
    eaea fafa fafa fafa gaga gaga gaga haha haha haha iaia iaia iaia jaja
    jaja jaja kaka kaka kaka lala lala lala mama mama mama nana nana nana
    oaoa oaoa oaoa papa papa papa qaqa qaqa qaqa rara rara rara sasa sasa
    sasa tata tata tata uaua uaua uaua uaua vava vava vava wawa wawa wawa
    xaxa xaxa xaxa yaya yaya yaya zaza zaza zaza sometext sometext
    sometext sometext
    </div>


    </div>
    </body>
    </html>
     
    greenflame, Aug 13, 2007
    #1
    1. Advertising

  2. greenflame

    Matt White Guest

    On Aug 13, 9:17 am, greenflame <> wrote:
    > ok, so here's the deal.
    > I have a div, which is adjusted to 100% width and 100% height.
    > I have another div inside (which is relative to it)
    > Problem is that the outer div is adjusting to the height and width of
    > the inner div. It's driving me mad.
    > I tried to play with z-index, with overflow:hidden... nothing. maybe
    > you can help me.
    >
    > (using windows xp, internet explorer if it matters)
    > Here's the 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>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1" />
    > <title>Ardeo Design Studios</title>
    > <style type="text/css">
    > body,p,tr,td {
    > font-family:Geneva, Arial, Helvetica, sans-serif;
    > font-size:17px;
    >
    > }
    >
    > .container {
    > /*z-index:1;*/
    > position:absolute;
    > top:0px;
    > left:0px;
    > width:100%;
    > height:100%;
    > border:5px solid #ffffff;
    >
    > }
    >
    > .bgWords {
    > background-color:#99CCFF;
    > font-weight:bold; font-size:36px; color:#212121;
    > position:relative; top:50; left:50;
    > width:50%; height:150px; line-height:30px;
    > /* for IE */ filter:alpha(opacity=40);
    > /* CSS3 standard */ opacity:0.4;
    > /* for Mozilla */ -moz-opacity:0.4;
    > /*overflow:hidden; */
    > border:1px solid #ffffff;}
    >
    > </style>
    > </head>
    >
    > <body bgcolor="#333333">
    > <div class="container">
    >
    > <div class="bgWords">
    > aaaa aaaa aaaa baba baba baba caca caca caca dada dada dada eaea eaea
    > eaea fafa fafa fafa gaga gaga gaga haha haha haha iaia iaia iaia jaja
    > jaja jaja kaka kaka kaka lala lala lala mama mama mama nana nana nana
    > oaoa oaoa oaoa papa papa papa qaqa qaqa qaqa rara rara rara sasa sasa
    > sasa tata tata tata uaua uaua uaua uaua vava vava vava wawa wawa wawa
    > xaxa xaxa xaxa yaya yaya yaya zaza zaza zaza sometext sometext
    > sometext sometext
    > </div>
    >
    > </div>
    > </body>
    > </html>


    Try reversing the position attribute on bgwords and container, so that
    bgwords is absolute and container is relative. Is that what you want?
     
    Matt White, Aug 13, 2007
    #2
    1. Advertising

  3. greenflame

    dorayme Guest

    In article
    <>,
    greenflame <> wrote:

    > I have another div inside (which is relative to it)
    > Problem is that the outer div is adjusting to the height and width of
    > the inner div. It's driving me mad.


    Your code is not formally correct, you give little clue about
    what you are trying to achieve (there is mainly text on the
    browser window and that is that). Why do you think you need
    absolute positioning?

    --
    dorayme
     
    dorayme, Aug 13, 2007
    #3
  4. greenflame

    rf Guest

    "dorayme" <> wrote in message
    news:...

    > Why do you think you need
    > absolute positioning?


    So the text can flow outside the box when you increase your font size, of
    course :)

    --
    Richard.
     
    rf, Aug 13, 2007
    #4
  5. greenflame

    dorayme Guest

    In article <H45wi.20007$>,
    "rf" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    >
    > > Why do you think you need
    > > absolute positioning?

    >
    > So the text can flow outside the box when you increase your font size, of
    > course :)


    <slapsAntennae>Why didn't I think of that?<.../>

    --
    dorayme
     
    dorayme, Aug 14, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt White

    DIV inside DIV overflow issue

    Matt White, Feb 25, 2009, in forum: HTML
    Replies:
    6
    Views:
    3,164
    Chaddy2222
    Feb 26, 2009
  2. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    208
    David Dorward
    Jun 1, 2005
  3. Replies:
    1
    Views:
    88
  4. Developer

    Anyway to find the height of a #div

    Developer, Jun 26, 2009, in forum: Javascript
    Replies:
    24
    Views:
    276
    Gregor Kofler
    Jun 30, 2009
  5. 123Jim
    Replies:
    0
    Views:
    148
    123Jim
    May 16, 2011
Loading...

Share This Page