Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts

    parent div contains children and takes up width of page

    i have 2 different sized div floats in a div

    i want the parent div to scale up to take the entire width of the page as well as fully contain the 2 child divs

    how, please?

  • #2
    New Coder
    Join Date
    Apr 2010
    Posts
    28
    Thanks
    0
    Thanked 3 Times in 3 Posts
    HTML
    <div id="parent">
    <div id="left">
    </div>
    <div id="right">
    </div>
    </div>

    CSS
    <style type='text/css'>
    #parent{
    width: 100%;
    height: 300px;
    }
    #left{
    float: left;
    width: 50%;
    height: 300px;
    }
    #right{
    float: right;
    width: 50%;
    height: 300px;
    }
    </style>

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by yakoup46 View Post
    HTML
    <div id="parent">
    <div id="left">
    </div>
    <div id="right">
    </div>
    </div>

    CSS
    <style type='text/css'>
    #parent{
    width: 100%;
    height: 300px;
    }
    #left{
    float: left;
    width: 50%;
    height: 300px;
    }
    #right{
    float: right;
    width: 50%;
    height: 300px;
    }
    </style>
    Sorry, I should've been clearer. The problem is that the parent div doesn't expand to contain the child divs when you do that: see
    http://www.mathannotated.com/pages/d...entiation.html (scroll down to the colour-filled boxes)

    Also I need a universal solution; not one that requires I manually specify the number of pixels for any div.
    Last edited by ptrcao; 12-15-2010 at 12:16 AM.

  • #4
    New Coder
    Join Date
    Apr 2010
    Posts
    28
    Thanks
    0
    Thanked 3 Times in 3 Posts
    I'm not sure I see what the problem is?

  • #5
    New Coder
    Join Date
    Apr 2010
    Posts
    28
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Could you give me the code where the problem is?

  • #6
    New Coder
    Join Date
    Apr 2010
    Posts
    28
    Thanks
    0
    Thanked 3 Times in 3 Posts
    I used debug tools to look at your code. No offense but the div tags are really unorganized and nested incorrectly. I can help you try to fix them if you would like

  • #7
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    ok, so the child divs are the orange and red boxes. i couldn't color-fill the the parent div for some reason, but I assume it should be around the child divs.

    Again the link is
    Code:
    http://www.mathannotated.com/pages/differentiation/differentiation.html
    (Don't worry about the messy code for now, I will clean it up later; as long as it's not the cause of this problem)

    The problem: See how even though i set the width of the parent to take up 100% of the screen across, text from below is flowing into that region? What this suggests is the width of the parent div is not 100% as specified

    Code:
    <div style="width: 100%;background:#ccc;">
    <div style="float: left; width:500px;">
    <IMG SRC="mathtype/eqn025.gif" WIDTH=490 HEIGHT=299 STYLE="vertical-align: -273px; margin: 0;display:block;background:#f63;">
    </div>
    
    <div style="float: left; width: 300px;background:#f00;"> 
    <span style=text-weight: bold;> Strategy </span>: "Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against the denominator.  The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>". 
    </div> 
    </div>
    Last edited by ptrcao; 12-15-2010 at 12:46 AM.

  • #8
    New Coder
    Join Date
    Apr 2010
    Posts
    28
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Okay I see what you mean. But you have divs nested in li tags which can cause numerous problems. It really will need to be cleaned up before I could diagnose the real problem. I'll keep looking.

  • #9
    New Coder
    Join Date
    Apr 2010
    Posts
    28
    Thanks
    0
    Thanked 3 Times in 3 Posts
    The div where your having the problem is also 100% width, thats why it feeds under. From what I see it has no ID or CLASS. Try giving it an ID and specify a width or float right.

  • #10
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by yakoup46 View Post
    The div where your having the problem is also 100% width, thats why it feeds under. From what I see it has no ID or CLASS. Try giving it an ID and specify a width or float right.
    But the two child divs are inside the div with 100% width right? They shouldn't be under that div, they should be inside it...right? The fact that the parent div is 100% should not cause the child divs to go under, the child divs are inside the parent div presumaby.

    I did some more reading and apparently the solution has something to do with floats and clearing floats or some such?

  • #11
    New Coder
    Join Date
    Apr 2010
    Posts
    28
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Yeah you have to be careful with floats and clearing. Give me 10 minutes and i'll see if I can get it how you like.

  • #12
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    I'll be damned. That's a day wasted but I managed to pull it off using a "hack" which I still don't entirely understand. I don't understand why something so simple and in demand requires a "hack".

    Code:
    <div style="width: 100%;background:#ccc; overflow: hidden;">
    
    <div style="float: left; width:500px;">
    <IMG SRC="mathtype/eqn025.gif" WIDTH=490 HEIGHT=299 STYLE="vertical-align: -273px; margin: 0;">
    </div>
    
    <div style="float: left; width: 300px;background:#f00;"> 
    <span style=text-weight: bold;> Strategy </span>: "Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against the denominator.  The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>". 
    </div> 
    
    </div>

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    That's a day wasted but I managed to pull it off using a "hack" which I still don't entirely understand.
    That's the property of floats. When we apply a float or position:absolute/fixed to an element, it'll become out of the normal flow. The article at http://www.quirksmode.org/css/clearing.html will show you the traditional and new approaches of clearing floats.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •