Why does child div overflow its parent div?

Question

I've stared at this for some time now and to no avail can I come up with a solution that keeps the liquidy of the website.

What I am trying to accomplish for the #right-content to fill all available space height wise inside of its parent which is the #bottom-container. so it maintains its liquidy.

But giving it a min-height:100% makes it overflow the parent.

Live example can be found at the following link

Live Example

a static example of what im trying to acomplish.

Static Example

score 0 · Answer 1 · answered Dec 21 '12 at 05:12

0

try the following css on #mCSB_1,

#mCSB_1
{
    position: relative;
    height: 500px;
    max-width: 100%;
    overflow: hidden;
}

answered Dec 21 '12 at 05:12

painotpi

6,894
1
37
70

I don't have a style called that anywhere in my code. thanks though. – amvmoody Dec 21 '12 at 05:35
Believe me i tried it, I'm not letting any help go to waste. but it doesn't seam to work no mater the style i place it into – amvmoody Dec 21 '12 at 05:55
@Khaos sorry for the late reply was on a vacation, the problem is you have some `inline styling` for the element, and that is taking precedence over the style that you're adding, you'd be better off removing the inline style – painotpi Dec 27 '12 at 04:22

score 0 · Answer 2 · answered Dec 21 '12 at 05:58

0

You need to set a float on #left-content. Add this to your css:

#left-content {
float:left;
width:700px;
}

and remove inline-block from the #right content:

#right-content {
margin-left:750px;
display:block
min-width:250px;
}

This will maintain a liquid format to the right-container.

answered Dec 21 '12 at 05:58

Carey Estes

1,534
2
31
59

Still Pushing past the parent container. Thanks though [Link](http://alan-michael.com/clients/debra/remix/t.html) – amvmoody Dec 21 '12 at 06:14
I must be confused as to what you are trying to do. #left-content and #right-content does not have a parent container. Please explain a bit further. – Carey Estes Dec 22 '12 at 18:16
The static example shouldn't have one, but the live one should – amvmoody Dec 22 '12 at 22:05

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

Your CSS is a main problem

Following CSS is from the URL what your want to achieve

#right-content {
display: inline-block;
width: 38%;
font-size: 14pt;
font-family: Verdana;
max-height: 600px;
vertical-align: top;
padding: 5px;
float: right;
margin-right: 25px;
overflow: hidden;
}

And Following CSS is form What your have

#right-content {
display: inline-block;
width: 36%;
font-family: Verdana;
height: 99.99%;
vertical-align: top;
padding: 5px;
}

Hope this will give you some clue to proceed

EDIT - 1

Main Problem with CSS is max-height. You will need to specify the correct height for your Parent DIV. If you want the resolution based dynamic CSS, you will need to update your height using JS. for hint check this

jQuery Screen Resolution Height Adjustment

edited May 23 '17 at 11:48

Community

1
1

answered Dec 21 '12 at 06:02

Rajiv Pingale

995
9
27

Cheers but no, your first example of my #right-content is what I will use if a solution to maintain the liquid flow is not found. Every part about the [Live Example](http://alan-michael.com/clients/debra/index.html) will liquidly re size from 1280x800 to 1920x1080 except the #right-contnet. – amvmoody Dec 21 '12 at 06:24
See `max-height`, you have mentioned in `first CSS` is `NOT` present in `Second CSS` which is may the problem, because you will need to specify the height of parent div, if your are using the scroll, that's what I think – Rajiv Pingale Dec 21 '12 at 06:30
Yes, I have tried that it works great for; 1920x1080, but breaks at 1280x800 [Example](http://alan-michael.com/clients/debra/remix/t3.html) – amvmoody Dec 21 '12 at 06:47
See, you have chosen 680 as max height, which is good for 1080 resolution but then it comes to 800, it will fail. You will need to calculate height based on SCREEN RESOLUTION, check following question and you will get help for same. http://stackoverflow.com/q/1271675/699695 – Rajiv Pingale Dec 21 '12 at 06:56
What I am trying to accomplish is have #right-content take up 100% of available renaming height in containing div. so it re sizes dynamically much the same way as the current #container does based on browser height and how this [layout](http://www.f-k-n.net) does also. but the content spills out of the div. forcing #bottom-container down with it. but leaving #container where its supposed to be. everything im trying to base on % and the hard numbers are the parameters in which it can work. – amvmoody Dec 21 '12 at 07:05
See, As far as I know, Height of div is depend upon the height of it's child element. So you can not set height to 100% height, as you have large content. The layout also breaks for large content. if you want demo, try to edit that page using Firebug. In HTML you have to specify the limit for your div. If your using percent for Height it will never help you. – Rajiv Pingale Dec 21 '12 at 07:16

Why does child div overflow its parent div?

3 Answers3