...

View Full Version : parent div contains children and takes up width of page



ptrcao
12-15-2010, 12:46 AM
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?

yakoup46
12-15-2010, 12:55 AM
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>

ptrcao
12-15-2010, 01:11 AM
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/differentiation/differentiation.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.

yakoup46
12-15-2010, 01:21 AM
I'm not sure I see what the problem is?

yakoup46
12-15-2010, 01:22 AM
Could you give me the code where the problem is?

yakoup46
12-15-2010, 01:24 AM
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

ptrcao
12-15-2010, 01:26 AM
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

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


<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>

yakoup46
12-15-2010, 01:38 AM
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.

yakoup46
12-15-2010, 01:41 AM
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.

ptrcao
12-15-2010, 01:49 AM
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?

yakoup46
12-15-2010, 01:52 AM
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.

ptrcao
12-15-2010, 08:04 AM
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".


<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>

abduraooft
12-15-2010, 11:38 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum