I have been trying to create the following layout using CSS3 flexboxes but have hit a stumbling block.
The layout has 3 outer rows, with the "header" and "footer" being fixed height. The middle flexes to fill the available space. The middle row must also be scrollable.
Within the flexible middle, there are 3 columns, with the left and right being fixed width and the middle flexing to fill the available space.
See what I have so far here: http://codepen.io/Samih/pen/yCHaI
Everything was going swimmingly, but in all 3 main browsers (chrome, firefox and IE11) scrolling down you will notice that the backgrounds/borders on the 3 columns do not extend to the full height of the parent container. Their height is maxing out at the height of the visible area instead of the full height of the container.
Thanks in advance for your help.
section, article {
align-self: baseline;
}
http://codepen.io/anon/pen/HAJDs
Related
I have a fixed sidebar and I want to stick a div to the bottom of it only if there is enough vertical space available.
If there is not enough vertical space the fixed div should not overlap the previous element, instead it should be on the flow and generate a scrollbar instead.
Any ideas?
You should look at the div that refers to your sidebar and apply a minimum height to it in your CSS.
#sidebardiv{
min-height: XXXXpx; <--- Where the number of pixels is at least the
} combined height and margins of all 3 boxes.
I'm hoping I can use flexbox to solve a div stacking problem.
I have one container div. Its height is 100vh.
Inside that div, I have two divs.
One, contains an image. Its height is dependent on the size of image, which grows proportional to browser width up to a max-width.
A second div is on top of the first div. I want its height to be equal to the remaining height of the div.
Can flexbox compute this for me automatically? Hoping so.
The answer is yes. Try appying flex: 1 to the second div. That tells it to stretch to fill the remaining space in the container.
Here's an illustration of the effect: DEMO
I hope the title was clear enough to get the general idea. The problem itself is a little bit trickier. To help with the understanding see my illustration below.
Since I don't have enough reputation points to include the illustration directly, here is a link to it on flickr.com: http://www.flickr.com/photos/cumbrowski/12009919663/
Or link to image here at Stackoverflow.com: http://i.stack.imgur.com/1Kswi.png
Phrasing it out in full-text.
The outer-most container should always be vertically and
horizontally centered in the available browser window. Both Width
and Height are dynamic, but the height cannot exceed 90% of the
available window height.
The inside of the container has 3 containers.
The top-most container has a fixed height but the width should span
the entire outer container width.
The bottom-most container should also span the entire width of the
outer container, but it's height can vary, based on it's content.
Preferably, If the container is empty, the height should shrink to 0
(if possible).
The center-most container controls the width and height of the
outer-container, except, if the total height of the outer container
would exceed the maximum of 90% of the available window height. In
that case the center-container should show scroll bars.
NOTE:
If there is no pure CSS based solution possible and the help of JavaScript needed, okay, sad, but if necessary, what can I do?! jQuery would be okay in that case as well.
Ok, I am using Chrome for this.
I have a div on which i defined display: -webkit-box;. Inside of this div there are 7 divs which all have -webkit-box-flex: 1;.
The first div, however, is smaller than the others. Any thoughts anyone?
I don't think 7 boxes in an 80% width div will give you evenly spaced columns. Even playing with the border of the last column, or setting the parent to 960px. 7 just doesn't go into it evenly
Appearantly I misunderstood the box model. I was confused at the time and thought all divs would be equal, but actually it is the remaining space that is being added equally.
I am trying to create a site layout using CSS. I have four (4) DIV elements. One is the main container that I have centered in the page and contains all the other DIV elements. Of the remaining three DIVs one is a page header, one is a left menu and the last holds content for the page. I would like to have the CONTENT DIV floated such that it is adjacent to the MENU DIV. However, I am finding that the width of the CONTENT DIV is not using the width I specified. I have created a sample running on JSFIDDLE which should make it easier to visualize.
http://jsfiddle.net/Rrgr7/
What I am trying to figure out is why the CONTENT DIV doesn't take up 600 pixels as I have defined? Thank you.
You have to float your content also. Your content div is 600 from the left not counting the float and if you add more text it will run down under the menu: example.
If you float it, then it will do what you want, but you have to be careful about sizes or it will float down under your menu.
If you just give it a 200px margin and no width, I think that would work best as it would use the remaining space and stay 200px from the left edge. The float doesn't push it further, the margin is from the container div.