I have a container div .parent with a fixed width 500px which contains a lot of child divs .child.
The problem is that the child divs are getting auto wrapped, in my case i want them to continue in one line even if they'll be hidden and after that i'll add custom buttons to horizontally scroll the .parent div.
Demo: http://jsbin.com/egohi3
How to achieve that with keeping the floating?
Thanks
Make the parent element have white-space:nowrap and the child elements to be display:inline-block (instead of floating). Here is a modified example: http://jsfiddle.net/7we5q/
#Phrogz's answer will work. You could also add another wrapper <div> inside "parent" and give it both "overflow: hidden" and a huge width (like "width: 100000px;").
Related
I have a div nested inside another. The parent div contains the title for a drop down menu. The inner div contains the choices. I have them in different divs so that I can add a scroll to the inner div without it causing the title to scroll. I have borders around both. The inner div looks to be 1px narrower on each of the sides. How do I make the child div exactly the same width as the parent div?
That's what width:inherit; is for.
What's your code like?
Try this, it should work:
width: 100%;
I have a "Content" div, which within itself contains 3 divs that float:left. Below that is the footer.
Now the footer has a border-top:10px which you'll see is hidden behind the content div. This is because the content div does not adjust it's height because it's content is floating.
To fix this I do
overflow:hidden
Here's the problem, while this fixes the height problem, it causes another issue.
The 3 floated divs have a box-shadow on them, and when the "content" container's overflow is hidden, it chops off the outside shadows.
Here's the jsfiddle http://jsfiddle.net/rhPCE/2/ as you'll see, the box-shadows are chopped off on the outside, and if you remove the overflow:hidden; from #content it fixes the shadows but breaks the positioning of the footer div.
Any ideas?
Thanks in advance!
When you float elements, the parent container naturally collapses because floated elements exist outside the normal document flow.
To fix this, you can apply a clearfix to the #content container:
Remove overflow: hidden; from #content
Include a clearfix, such as this: A new micro clearfix hack
Apply the clearfix class to the #content div, like this: <div id="content" class="cf">
After this, your parent container #content will expand to the height of the tallest floated element.
Working Example: http://jsfiddle.net/rhPCE/3/
I have a parent div that has a bunch of child divs inside it. I want the child divs to be horizontally laid out beside each other. Which means the parent div can not be set to an exact width amount as the image amount will change all the time. So I presumed setting the parent div to width:100% then the children div items inside it I would float:left.
It will only work if I give the parent div a set width that matches the width of all the child divs inside it. Is there a way to have it 100% and lay the children divs out side by side horizontally inside the parent.
Take a look at this example fiddle - is this what you want?
Essentially, you just need to declare the following on your wrapper div, thats all
#wrapper{
white-space:nowrap;
overflow:hidden; /* whatever suits you - could be scroll as well*/
}
you don't need to float the images, as they are no block-level elements per default.
I want to increase the size of the outter div when the height of the inner div increases.
height:auto seems to be working only when the contents are added its expanding.. it doesnt seems to be expanding when the inside div height is more.Is there any solution for this in css?
Try to put overflow: hidden in the parent div or otherwise float it. Surely you have your inner div floated and then parent div doesn't consider it to expand its height. If this is the case, both solutions should work.
My main div .container is set to overflow:hidden; to maintain 100% height, it nests all content divs except for my header and footer. However inside is my sidebar which contains things that need to overflow out and redefining a child div doesn't seem to work. Is there a way around this?
I think you'll need to either define your parent DIV with overflow: auto; or set your child div to be absolutely positioned.