This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 years ago.
I have made a columnar layout that works fairly well for my needs, but I am experiencing an issue with the height of one column. I have prepared a jsBin that demonstrates the problem;
http://jsbin.com/mawuliyulo/1/edit?html,output
Basically, when you scroll down - eventually you start seeing white on the left side. Is there any way to force this to stretch all the way down indefinitely?
This is not using a flex-box layout. It is simply achieved using :before, and :after pseudo-selectors.
Add position:relative to your main-container class
Related
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I need to achieve the following layouts in CSS:
I've been trying flexbox but cannot get container 'C' to appear correctly on tablet width. I can reorder the columns using CSS order but the width of 'C' spans the full width of the page but it needs to be constrained to the same width as container 'A'.
I've setup a blank starter pen here because I can't post my project: https://codepen.io/ahdigital/pen/GRqpQRL?editors=1100
My question is, will this be possible with flexbox, or should I use another CSS approach? (Trying to avoid JS).
No.
By using nested flexboxes you can achieve a similar layout if the two boxes that align vertically to each other (A and C in this example) in tablet layout are adjacent, but that isn't the case here.
Use Grid to do the layout instead.
With media queries you could use Flexbox for desktop, Grid for tablet, and neither for mobile.
This question already has answers here:
flex-grow not sizing flex items as expected
(5 answers)
Closed 5 years ago.
I have a grid in flexbox, like so:
They're all positioned using flexbox, and then the panels themselves (the coloured bits) have margin: 5px.
codepen here: https://codepen.io/callumacrae/pen/bRoZdp
Because the top right section has two elements, there's more margin there, so it's pushing down slightly—I don't want this to happen!
I guess the two possible fixes are either to make the margins not do that, or make the components five pixels smaller instead of five pixels larger like they are right now - but I don't know how to do either of those things.
How can I make adding more elements not change the size of the parent?
The main problem is that you are sizing the elements using flex-grow. flex-grow is not the right property as it, together with flex-shrink is used to distribute the space left (or if to little).
You should use flex-basis, because as soon as you start fill these empty boxes with content, and their content will differ in size, they will misalign even more.
Here is an updated version of yours, where I changed to style="flex-basis: calc(50% - 10px);" (the 10px is to make up for your margins).
Codepen with flex-basis
And here is a version of yours, with the same text I used in mine
Codepen with flex-grow
This question already has answers here:
How to avoid empty clear divs?
(5 answers)
Using :after to clear floating elements
(5 answers)
Closed 8 years ago.
I'm using a div with css of clear:both;
The div has no content and the clear:both is the only style applied to it. It works fine on my devices to solve floating problems.
My question is: does the div need content, like a non breaking space to work on all devices and browsers? Do some browsers ignore empty divs?
Thank you
I'am pretty sure no browser 'ignores' an empty divs. I would add a 100% width just to be sure it works.
This question already has answers here:
How to get this 2 columns layout (were one fits to content)
(3 answers)
Closed 4 months ago.
The columns should:
be full height
have vertical scrollbars if needed but no horizontal
This is what I got so far (along with a footer and a header)
http://jsfiddle.net/HZMCX/11/
The problem withmy code is that the right panel text starts at mid screen and not next to the left panel.
[Ignore this, this is so stackoverflow allows me to post the link to jsFiddle ]
Any ideas on how to fix this?
Thanks!
Your code can be applied much more simply than you currently have it:
Consider simply floating the side column and the primary content and setting fluid widths on both.
http://jsfiddle.net/MygUu/
Wrap the overall layout in a .container class, and set overflow to hidden.
.container {
overflow: hidden;
}
Additionally, it is best practice not to style using ID selectors. Hope that helps.
This question already has answers here:
CSS: Special Fluid Layout Problems
(5 answers)
Closed 3 years ago.
I have the following test code to play around with:
http://jsfiddle.net/b6QFY/1/
I want the "left" element to be fixed and the "right" element to be fluid within the parent container so that it will grow and shrink as the browser width changes, and not wrap. Seems so simple, but have issues getting something to work.
This is what I meant to link to. (I should be getting to bed.)
The core of it:
Padding-left on the container element, absolutely position left element with negative left-margin, and width of 100% on the right element.
To my knowledge this should work in most browsers, except IE6 and possibly 7.
you can use display:inline-block;
this article has will help http://www.tjkdesign.com/articles/liquid/3.asp
Absolute positioning the left element might be the more comprehensive answer when other things come into play, such as container borders and backgrounds and organic growth of the right element.
See my previous answer.