I have a container DIV that is resizable. I allow the user to add DIV elements to it, to create some sort of a playlist. When the container DIV is not large enough for a content DIV to be appended, I want the content DIV to just get cut off at the end of the container DIV. Unfortunately it always gets appended underneath other content elements. I tried overflow:hidden; for the container element, but that didn't have any effect...
overflow:hidden;
is a good choice, but you need an inner container where contents can be added horizontally, an inner container larger than the visible outer one.
Fiddle
Add white-space:nowrap to your parent div. When you add children they will be appended without breaking to the next line - even if the parent container is not as wide as the width of the children divs.
FIDDLE
Related
I have a textarea (asp.net multiLine TextBox) wrapped in a few nested divs. When re-sizing the textarea, it expands over all of the other elements. This is not the case when wrapped in a table, as it pushes the surrounding elements down and right to accommodate the re-sizing. How do I get this to work in a div?
I'm not a pro with CSS, but I've tried relative position on the contained child div, but this just makes the textarea hide all the other elements as it expands. I can use a table, but I'm trying to get away from tables for layouts.
I've expanded outer divs to accommodate the content of inner divs with relative positioning, but it doesn't seem to work here. Also, the overflow effect is not desirable.
You can achieve the same result (like a table) in a div using
div{
display:table;
}
Here is a fiddle.
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.
I was playing around with a floated div example, where I have a floated container and some floated child divs except one non-floated child
You can see the example on;
http://jsfiddle.net/emeRJ/7/
Now I wanted to understand the behavior or rendering for this non-floated child div...
2 questions:
Could you please explain how it renders currently and what difference does it make if I have it coded after all the child divs (i.e. it is the last child element)
Also will it have any impact on the non-floated child if I make the container as overflow:hidden ?
Answer 1
At the moment the un-floated div right at the top with the red border is displaying block so it spans the whole width of it's containing div. It is unaffected by the other divs in the containing element
If you move it to the last position in the containing div the other floated divs do affect the un-floated one so you need to clear: both; (which clears the float and places the un-floated div under the floated divs) with CSS, otherwise any text contained within the un-floated one will be floated to the left and then would proceed to wrap around the floated elements (it doesn't do this at the moment because the text isn't long enough). Unless that's what you are trying to achieve?
Answer 2
It shouldn't make any difference as nothing is actually overflowing the containing div which would be set to overflow: hidden;
Hope this helps
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 ran into a quite annoying problem a few days ago. I'm working on a website with the following structure:
[header]
[menu strip]
[featured stuff]
[contents]
[footer]
(these are all horizontally centered divs under each other with the same fixed width in this order)
Later on I will change the contents of the "contents" part. Inside the "contents" div there will be other divs, sometimes with a fixed height and sometimes not.
Now here's the problem: any time I put another div into the "contents" without a declared height, the inner div renders with 0px. It doesn't matter if the inner div has elements with declared height or not. It works with declared heights, but I cannot guarantee that I will know the height of the contents at all times.
What could be causing this?
This sounds like a clearfix issue when elements inside the div are floating.
The problem happens when a floated
element is within a container box,
that element does not automatically
force the container’s height adjust to
the floated element. When an element
is floated, its parent no longer
contains it because the float is
removed from the flow.