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
Related
I have a div main container that contained 3 others div containers.
I want that the 3 child div stay center and always on the same height (at the top of the parent div).
My problem is when I resize the window browser, the child div go under the other. I don't want this.
I also add a css condition for under 768px. In this case, I want that the child div go under the others.
Here a fiddle example: http://fiddle.jshell.net/mCXWs/
In this fiddle the child the blue div go under the green and the yellow under the blue for a window browser above 768px. I don't want this result. I want the stay at the same height (top: 0;)
I don't know what to do ...
Sorry for English, I'm French
3 blocks always of the same height? Use CSS table layout: display: table and display: table-cell (IE8+)
a (block displayed as a) "cell" will never go below another "cell", problem already solved (edit: in the same implicit row)
centered horizontally? Use margin: 0 auto; on container
at the top of parent div? Use vertical-align: top.
under 768px (in MQ #-rule), just override table(-cell) by display: block and divs will behave like default div, going one under another. You also have to override min/max-height, maybe.
avoid overflow: hidden and position: relative (well, with tables...) as long as you can
Working example: http://fiddle.jshell.net/EEEjg/1/
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've got a HTML / CSS question about growing a div to fit the screen when filled with other divs.
Here's my structure which is inside my "main" div:
I've got 3 divs inside of a container div, with the last div inside the container having an overflow:auto; property (as it has scrollable content). The whole container div is floated left.
How can I get the last interior div to expand with the screen resolution? The problem here seems to be that my container div has no real "size" so when I set it to height: 100%; nothing really happens. Of course this means that if I assign it an actual size, then it won't grow to the resolution..
What should I do?
Have you looked up CSS3 media queries? Here's a tutorial and demo.
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;").