I'm trying to get my textarea to fill the full width of the div it is wrapped in, but even when using width:100% and display:block . At the start it does appear to be stretched but when it is focused it drops down again. i just can't seem to be able to have it stretch the full width when a user goes to type into it.
Really head frying, because I cant set it to be a specific width, as the wrapper width varies with monitor size.
any ideas?
Make sure your parent div has a height and width set. Otherwise height: 100% and width: 100% will not work.
See here for example:
http://jsfiddle.net/wXs92/
Related
I am trying to get a div to expand to fill its container without causing that container to expand beyond the browser window's width, as in this page. Click "Expand" next to "Stack Trace in the last entry.
What it's supposed to do is show a horizontal scrollbar.
What it's actually doing is expanding beyond the width of the window.
I can get it to sort of work if I give the <div class="stack"> element a max-width in pixels, but I want it to expand to fill no matter how wide the window is, without expanding beyond it.
How can I fix this layout? What's a general way with css to get an element to expand horizontally to fill its container while not going beyond the window's edge?
The Page is back on now!
I cann't get your table stuff sorted. There are some invalid width Parameters.
You should use div-Containers rather then tables to layout your page!
The workaround solution I came up with was adding a max-width to the expand/collapse div. It doesn't really prevent the table being wider than the window, but it solves 95% of the cases.
Don't use tables, use DIV's and for full width use
width: 100%;
This will always use up 100% of the browser window width.
You can provide you outer Div width:100% so it will take browser width. Or else you can calculate browser width with Jquery $(document).width(); and store this in variable and provide to your outer div.
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
I have overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
Looking for some assistance if its possible to do a fluid height image in CSS.
Ex) http://jsfiddle.net/VDB7A/20/
I want to have the box div at a set height, but dynamically size the container to show all the text at the bottom without going over the set box height. Basically this is for a fluid width site, where I want to cap the box height and auto adjust the image size to show all the text without going over the height.
Thanks!
Figured out my own answer:
I need to scale everything on width. So I need to put a min-width and max-width on the container. Then I need to put width:100% on the image. Height will always be auto.
http://jsfiddle.net/VDB7A/27/
I need to scale everything on width. So I need to put a min-width and max-width on the container. Then I need to put width:100% on the image. Height will always be auto.
http://jsfiddle.net/VDB7A/27/
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.