I have a div on my page, and I want to make it expand to a certain size and then stop. Right now I have...
div {height:300px; width:700px; overflow:auto;}
The overflow attribute makes it scroll, but until then, I would like it to expand with the content. I have a text box below this and it looks bad with a text box floating down part of the page. Is there a way to have both of these attributes? All of the hits I found on Google were about making it expand to fit the content. Thanks!
Try using max-height.
This will allow you to specify the maximum height the box can be and once it reaches this height it will scroll as you've specified.
Did you mean you want the div to have its height variable, depending on the size of content? Then just give height: auto instead of giving a fixed height of 300px. height: auto will adjust the height of the div based on the content size. Also define max-height property if you want to limit the maximum height the div can extend to.
Related
How can I make my div the max size of a container? When I try searching it up my self I always find articles talking about max-width.In my website my content area is a div that has 4 items in it and I want to set the width of content area to 100%. To make all the items fit perfectly but when I do this the margin is overridden?
Try placing the following in the style or CSS and see if it works:
box-sizing:border-box;
I can't seem to keep my (dynamic width) table on the same line as a previous element and have it extend to it's parent container without exceeding it and overflowing. I don't want a horizontal scrollbar as the table should just break the lines and/or words up to make it more narrow.
However, it's not doing that.
jsfiddle
In the fiddle, the table overflows and extends beyond it's parent container's width. The parent container is using white-space: nowrap to keep it on the same line as the content next to it.
Why is it not sizing it's width correctly?
If I set a fixed width on the table, it works and sizes the width correctly, but I need the width of the table to be dynamic. Only the outermost containing div is fixed.
Any ideas?
If you add
.listInfoTbl {
[...]
max-width: 142px;
[...]
}
then you'll see everything is working. But you may wonder why is that?
The answer is that you set a certain width for your div.listPropertyDiv therefore it won't grow beyond this and additionally there's some padding to take into the formula:
innerWidth(.listPropertyDiv) = innerWidth(#left) - border(.listPropertyDiv) - padding(.listPropertyDiv) - margin(.listPropertyDiv)
innerWidth(.listPropertyDiv) = 397px
Therefore:
width(table.listInfoTbl) <= innerWidth(.listPropertyDiv) - width(img.listImage)
width(table.listInfoTbl) <= 142px
You should overthink having a fixed width on #left, if your thinking about dynamically changing the content's width because if the parent doesn't shrink it's children can't.
A fixed fiddle
But maybe this is what you're looking for a solution with max-width and percentage so objects can shrink accordingly.
I have a div (div#slideImage) and within a few images.
But this is not div by adjusting the images inside that div.
See the full page.
Note that the size of the div (width: 75px; height: 28px;) is smaller than the size of the image.
I'm using the plugin jquery.cycle
This probably isn't what you were expecting, but can't you just resize the image? It seems to make more sense to me than expecting the div to do the work for you.
If you specify the dimensions of a div, then contained nodes will either be clipped or scrolled depending on the div's overflow property. Your best bet is to set the dimensions of the div to more useful values.
I am trying to stretch div as soon as some text is loaded.I am able to do that by giving min-height:140 px and height:100% to its parent container. But content in my div is crossing its parent container. How can I limit the inner div so that it will not cross its parent container.
Please help me as I am trying for it from so long.
thanks in advance
HP
Use the overflow attribute in your CSS.
#myDiv {
overflow:auto;
}
Depending on the width you assign, this will get the nested div to display a scrollbar once it's width exceeds that of its parent.
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
overflow:auto;
Reference
w3schools
css tricks
I am trying to resize an image using only CSS, the problem is I don't know it's dimensions.
What I have tried so far is putting the into a and then making the image have 105% width. The idea was that the containing div would have no size other than it's contents, but this is only make the image the size of the next ancestor that does have an explicit size.
In order to resize something in CSS you have to either give it an exact pixel value or base the size on something else.
If you were to set an image to have a width of 105% of its container then that container must have some width for you to use. If it's a regular div with no styling applied then its width will be the full width of that divs parent and your img will be 105% of that.
If the div holding the img is floated then it will be getting its width from its contents (aka the img). This won't work because you can't have two elements getting their widths from each other. One of them has to be constrained somehow.