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
Related
So you have a set of inline divs. Their width is hard coded but the content inside can be changed meaning the height of the divs are different.
Is there any way to enure that all divs remain the same height, without having the danger of content spilling out its parent div?
I've tried inheriting min-height but it seems that this is not dynamic. So if the parent div has a min-height set to 320px and the sibling divs are inheriting this value, if any sibling were to become higher than 320 because of content, it and the parent div will change, but the other siblings will stay at 320.
Is there any way around this without the use of anything other than css?
Simply make use of CSS' table display.
Take the following example markup:
<div>
<figure>Example one</figure>
<figure>This is example twooooo</figure>
<figure>3</figure>
</div>
If you want all three figure elements to remain a constant height whilst ensuring they never escape outside the boundaries of the div container, simply:
div {
display:table;
}
div > figure {
display:table-cell;
}
All three figure elements will now remain the same height - the height of the element with the most content or the min-height of the containing divider, whichever is greater.
Here's a JSFiddle example showing this in action. Notice how I've given the div a grey background colour and that the figure elements never escape outside the boundary.
For browser support, see: http://caniuse.com/#feat=css-table
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.
I have a DIV that contains user-generated contents. These contents may and will start with an item that has a margin-top and that margin-top overflows the container so that there will be a gap between the container and preceding elements. I found out you can set the container to either display:inline-block, float:left/right or give it a padding-top value.
If you do one of the first 2 options the container will shrink its width to its contained elements. Padding-top is not an option because of the gap that the padding will generate. Basically you could set a specific width to the container but the problem with that is that there's a templating system with 60+ layouts and I cannot edit all of them.
So I was wondering, do you see any CSS-way to get rid of that margin-overflowing problem or the shrinking-problem here?
One of the ways is to add "overflow: hidden;" to its parent. But it not always an option if you have content that you want to overflow parent's boundaries.
Example: http://jsfiddle.net/cLxhE/1/
Another way is to use pseudo-elements to clear it. But it will not work in IE7 and below.
Example: http://jsfiddle.net/cLxhE/2/
You could add this to the top of your container div before the user added contents:
<div> </div>
Then give it a height of 0px.
In my project, I need to implement a container div that should have an unknown (unlimited) width, without breaking to a new line if its width overflows through the browser's window.
The container div has the CSS property of (white-space: nowrap; display:inline;) and the components inside this div has (float:left) CSS property. All widths are set statically. To test the behaviour, i used a button that calls a javascript function that appends a component inside the container div.
The problem is that when the total width of the container div increased to more than the browser's window width, the components inside the container div will break to a new line. I wonder whether it is possible to have a div with unlimited width?
Many Thanks..
The white-space: nowrap property does not apply to floated elements. Simply put, when you float an element to the left or right, there is no white space between them.
See white-space (CSS property) for more information on what white space is and the line that specifically states you can't do this with floats.
Try setting them to display: inline-block so that the parent actually considers them to be content.
Try adding a specific height to the container div, or removing the float: left rule from the components inside the div.
I'm having a few problems trying to position some divs in my website layout. All of them is related to the div's size. I'm using Chrome's developer tools to inspect the divs and when I mouse over some divs it is just 1px-high, but it has content inside and its content has some height. Shouldn't it have at least the same height of its content?
I don't know if I explained well, so I'm posting some images. I'm using Blueprint CSS Framework and it happens when I use class="span-XX" and inside it I don't use neither class
Here is some images (click to zoom)
The parent div
The div with problem (no height)
The child div
The parent div has class="span-XX", the div with problem has only #search
which is this one
I suspect it is some float or positioning issue with css but I don't know what it is and how to deal with it. I have also a list containing the social networks on the top of the site which ul has the same problem.
If you have floats inside, you need to clear them. Apply overflow:hidden; zoom:1; to the parent containing the floats and it should resolve it.
If you have negative margins / position + relative and negative offset and cant use overflow hidden use a clearfix... http://work.arounds.org/clearing-floats/
Your child div has the float property set, so the parent div will not expand height-wise to contain it. To get the behavior you expect, set overflow: hidden on the parent div.