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.
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 some child div's in a parent div that uses flexbox.
The parent div has min-height:100%.
When I add a child div that has very little contents, I want the width to stretch to 100% of it's parent (which it does), bot not the height.
If the div contains only 2 lines of text, the height of the div should be just the height of the text inside, and not take up the rest of the space available in the parent.
How to solve this?
See http://jsfiddle.net/brqzLcb4/
3v
I don't want the green "homepage" div's to become "higher" than necessary.
demo - http://jsfiddle.net/brvzLcb4/1/
add align-content: flex-start; to .pagecontent it will work as you wanted
it is the opposite of this Keeping overflow:hidden really hidden because i need that a child element gets visible although its out of the parent element.
it is a slideshow:
the parent-div (for example 500x250px) has width, height, position:relative (needs this) and left: 15px, overflow:hidden
there are some child-divs with the images (+text) included and a prev/next-div.
the prev/next div have left resp. right -15px. looks quite cool on screen...
but because of the overflow:hidden (plus position:relative) from the parent the half of prev/next-div isn't visible
http://imageshack.us/photo/my-images/857/lookactually.png/
http://imageshack.us/photo/my-images/33/shouldlook.png/
A child of an overflow:hidden element can never be visible outside it's parents' box(these are the rules)
to get around this you could place the navigation outside the overflow:hidden element or you could just increase the height of the parent div to accommodate the navigation.
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.
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;").