Expand DIV auatomatically while having a table inside - html

I have a table inside a DIV , but the div height and width don't expanded automatically when the Table(:edited:) height and width are increased


<td><div/></td>
DIV's width should stretch the full width of the TD, minus TD's padding and DIV's margin (if any). However, DIV will never grow taller than its content, regardless of placement - you have to set its height. You should be able to set DIV's height to match TD's height, whether you use JS or whether that's rendered by server.
BTW, unless you're targeting some special height, the TD will grow in height as DIV grows, and DIV will start growing vertically as its content (assuming text) is longer than DIV's preset width (in your case, TD's width).

Related

Given one div height sized to an image in a container, can flexbox automatically compute a second div height to fill the container?

I'm hoping I can use flexbox to solve a div stacking problem.
I have one container div. Its height is 100vh.
Inside that div, I have two divs.
One, contains an image. Its height is dependent on the size of image, which grows proportional to browser width up to a max-width.
A second div is on top of the first div. I want its height to be equal to the remaining height of the div.
Can flexbox compute this for me automatically? Hoping so.

The answer is yes. Try appying flex: 1 to the second div. That tells it to stretch to fill the remaining space in the container.
Here's an illustration of the effect: DEMO

How to make expandable div with min-height

If I have a div with height:100% & width:100%, it's background color will be up to the browser's height and width primarily. But if the content inside that div grows dynamically, then, the div will not expand according to the content, text will be overlapped and flows over that div.
On the other hand, if I set min-height and min-width to 100%, then if the content length is smaller than browser's window, background-color will not stretched to browser's height and width.
html, body{
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 100%;
width: 100%;
background-color: red;
}
How to make such div which background-color will cover up browser's window size primarily but if the content grows dynamically, it will be able to expand with content at the same time.
Regards.

I still don't know what you are actually trying to achieve. Going by your fiddle sample, it would have been much easier to just use a solid border around the inner diver to get a red surrounding (instead of another div with background color and padding). But if you just don't want that the text oveflows the div, you have to allow the div to resize:
http://jsfiddle.net/JQ7fr/1/
Update
I think see your problem now. What you are trying to do is not possible the way you are trying to do it. You are falling for a fundamental misconception of the CSS Box Model. The min-height of a box always refers to the height of its parent. If the height of the parent is not set, the height is auto by default, which means the height is calculated by the browser to be as big as necessary for the content of the box to fit. It is also calculated that way if you set a min-height!
Assume you give body a height of 100%, the body is as high as your browser window. If give your outer div a min-height of 100%, it will also be as high as your browser window, but since you set no height (setting min-height does NOT affect the height property!), the height of this box is auto. So in fact, the real height (CSS standard calls this the "tentative height") is only as big as the content of your outer div (not necessarily 100%), yet since min-height says it must be 100% it will render with a height of 100%, regardless what its real height is. If you now set min-height of your inner div to 100%, those 100% mean "100% of the height of my parent box height" and the parent box height is auto, it is NOT 100%! That's why the inner div does not fill the whole screen then.
Of course you can give your outer div a height of 100%, in that case setting the min-height of your inner div to 100% will make it fill the whole screen, but now the outer div is really just 100% in height, it will not expand beyond 100% (it has a FIXED HEIGHT), not even if the inner div is bigger than that, that's why red color will not expand beyond the screen height, even if the yellow color goes beyond the screen height.
Either your outer div has a fixed height, in which case the height will be fixed (that's the whole point of a fixed height, isn't it?) or it has a flexible height, but if it has a flexible height, it will never be "higher" than required for its content (the inner div) and thus using 100% at the inner div, whether you set min-height or height doesn't matter, always refers to 100% of the outer div height and that one will be as big as required for the inner div. I hope you were able to understand what I'm saying here.
You can surely get outer div to behave the way you want (always fill at least 100% of the screen, but expand beyond that if the content requires it) by just setting it's min-height to 100%, since here min-height will refer to the body height and your body has a fixed height, but the inner div will never behave that way. Well, it can behave that way, if your outer div has a fixed width, but then the outer div will not expand, not even if the inner div would require it, instead the inner div will overflow beyond the bounds of the outer one.
I'm pretty sure it is no problem to some create a web page that will look exactly the way you want it to look, but the problem is, we (or I) don't know what it is supposed to look. I doubt you want an ugly yellow page with a red and blue border around it, do you? Yet so far this is the only page we have seen from you. I don't know what kind of color effect you are trying to achieve, whether you are using images (or if you should be using images) or how the page will really look like in the end.

I can't understand your question very clearly, I think you should set a correct overflow property to your div,
try giving it overflow: auto; or any other suitable one
The CSS Overflow Property

Child div being set to 100% of window, not of parent

http://dev.epicwebdesign.ca/korokriver/
It's been a long night. I'm having issues the grey metallic div on this page. I want the height to be 100% of the content. When I set it, it is set as 100% of the window height and falls all over the bottom of the page.
I have set 100% height on html, body, and every div leading to this one (site, copy, content, metals)
I should clarify, I explained that badly.
I want the grey child div to be the height of the site, and the height of the parent div. Not the height of it's content.
It's also happening with the other pages, though a different div.
http://dev.epicwebdesign.ca/korokriver/?page=geologicalconsultants

You could add overflow:hidden on #content. That should do it.

If you just want the div to wrap to its contents:
Remove height:100%; this is currently setting it to be 100% of the window.
By default divs wrap to their content unless floating child elements are not cleared properly, so there should be no need to set a height.
You could use jQuery to set the height of the child to the height of the parent like so.
$('#child').height($('#parent').height());
http://jsfiddle.net/ZXc3P/

How to dynamically resize parent DIV?

Basically I have float divs with fixed width of 250px. I need to make it so that the width of a parent div and the width of the browser resize automatically based on the amount of float divs i add.
For example: if my browser size is 800px wide and i have 2 float divs which combined are 500px wide than there will be no horizontal scroll bars because 500 fits inside 800. But when i add 2 more float divs the total width of all float will be 1000px which is bigger than my browser width thus creating horizontal scroll bars and making the browser resize automatically.
Right now when i try to do it, float divs that dont fint inside 800px just drop down instead of adding on the side.
I could specify fixed width of parent container but the whole point is to make float add to the side dynamically.
Any suggestions? If CSS can't do it maybe Javascript can.
Is there a Javascript that will explicitly add width to the parent div whenever child divs are added?
Thanks.

use width:reminder; to the parent DIV.

How do you make a variable size div?

How do I make a div that has a variable width? So I want a div to span a certain width inside a container and if there is another element in it, the div will automatically fill a portion of the of the width.

Don't give the div a width and it will fill 100% of the horizontal space. Add margins to it (as either % or px) and it will shrink accordingly.
It sounds like you may be asking how to have something inside the div force it to grow wider with its content. I don't think that's possible without javascript.