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.
Related
This question already has answers here:
Padding for Inline Elements
(3 answers)
Closed 2 years ago.
I'm just playing around with the border/content box CSS properties in the very early stages of learning.
Trying to make the two boxes line up next to one another- I've achieved it with using the float left and right properties.
However, when I use display inline, it causes an overlap with the above block element h1. I've displayed it as a table here, so the background colour I've set on it only spans the width of the content, but that shouldn't change the fact that it is still a block element.
More than the overlap, display: inline on the div causes the boxes to shrink in size as well.
Can anyone explain why this is happening?
Please see the code here: https://jsfiddle.net/gouvrze1/
Only block elements respect width and height rules. Inline elements just flow with their text content. The overlap is caused by the padding and the fact that the divs are further down in the DOM, so they're drawn after and on top of previous elements.
Try changing your divs to display: inline-block instead.
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:
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
I'm having an issue with the CSS columns property. Namely, I cannot seem to get the container surrounding them to stretch to the width of the columns as seen here: http://jsfiddle.net/niaconis/43k5s/5/
Seems a lot like the similar issue with floats, only horizontal instead of vertical, but the pseudo-element clearfix doesn't help with this one.
How can I get the container to completely wrap the columns?
P.S. I know about the XY Problem, but this is merely a curiosity. I don't care about achieving the layout from the example. I do care about finding out why the container doesn't stretch to wrap its contents.
The absolute positioning of your element is causing the browser to incorrectly calculate how wide it should be when using the columns property. Remove it and the element stretches as it should.
This question already has an answer here:
IE7 CSS Scrolling Div Bug
(1 answer)
Closed 2 years ago.
I am developing a site that has a specified height to it. I have made a DIV and defined the height and added the CSS property overflow:auto. Within this DIV I have another that contains my content and other specific styling. In all other browsers the inner content scrolls vertically just fine if it is longer than the specified height outer DIV height. However, in IE7 (probably in 6 as well) the inner DIV is overflowing the outer DIV. To me it looks like IE7 doesn't see that this DIV is actually a child so it ignores the overflow:auto.
Any ideas what I may need to change?
Do you have set widths on the divs? I know both IE7 and IE6 have issues with overflow:auto; sometimes if there are no set widths, so you should try adding them to be sure. Also try adding display:block; on both divs (particularly the inner div).
If you haven't use it already, Firebug Lite is an awesome tool for testing CSS in the IEs.