Hi all. I want to create a container within a container. My goal is to control vertical spacing of the page content with the inner container versus the outer container. My page is a full section scroll. So the outer container currently encompasses the entire viewport width and height.
I think to make the inner container a % of the outer, I have to position the outer relative and the inner absolute. But then I’m not sure how the content is to be positioned within the inner container so it will scale to the inner container since the inner container is positioned absolute.
Here is the section of my site I’m working on: Page
In the image will also demonstrate my problem. On lower height resolutions, the line “Let’s caluclate yours.” gets scrunched behind the black box at the bottom Im hoping putting the content in a container will prevent this.
If I didn’t explain myself very well Ill try it another way too. In the below image, Container 1 scales 100% the height and width of the viewport. Element 4 is a sticky at the bottom of the page. I want Container 2 height to be between the top of the page and the top of Element 4 at most. As the viewport height changes, I want the vertical spacing between Elements 1-3 to scale relative to Container 2 height. Right now, if the viewport is below 800 px, the last element of Container 2 is going behind Element 4.
That’s all well and good but how does that solve your problem of element 3 not actually fitting in that space? You can’t magically shrink content to fit unless its an image or some other fixed item. Fluid text can’t be scaled downwards without it being impossible to read.
What do you expect to happen when the content above element 4 no longer fits in that space? Where is the scrollbar to appear and how does that help with your initial problem anyway.
I believe we spoke in depth about this in your other thread and it seems more a question of logistics than layout. At some point your layout won’t fit unless you have minimal content.
I can create the layout you ask for above but I still see you running into the same problems.
e.g.
or:
You could also use media queries based on height and reduce the content spacing (or remove some content at smaller heights to make it fit better). Of course then there is the issue of how your one page scroll script is going to handle it all.
Perhaps also giving the footer element a partially transparent background could offset the problem when it overlaps.
Hi Paul, yes we did touch on this in another thread. In that thread I was attempting to use media queries, and you had mentioned about trying to create a truly responsive page. That is what I was attempting with this approach. Really all I need to do is change some of my vertical spacing % to get everything to fit. That would be the fluid component, I won’t scale text.
I was hoping to put all page content between the header and footer in a container that when the vertical resolution shrunk to the point that the content above Element 4 no longer fit, the container would adjust to the available space and the vertical spacing of the elements inside would adjust relative to the container height.
I attempted media queries, because my biggest problem is below 800px on desktop screens, but I have no way of testing the result. Every emulator I have tried is inaccurate as most show they worked, but I used 3 devices with below 800px resolution and it didn’t work. And you pointed out, each device height could also changed based on toolbars, etc. Between inability to test and the other variables such as toolbars, I have no idea how to tell if they work. Its difficult to get my hands on devices. How do you make sure everything works on all resolutions without having the device? Every emulator I have tried actually shrinks the content as Im actually trying to do showing it works, but in reality it doesn’t when you get on an actual device.
I figured there would be a way to scale the content to increase in size on larger screens and decrease on smaller (mobile works fine currently). Spacing, font size, and images increase on larger and decrease on smaller using percentages relative to the container vs. media queries.
Ill look into your table approach. I have zero understanding of tables, so ill do some research. Ill give the media queries a whirl again and I guess just hope they work. Thanks for your suggestions!
You simply grab the bottom of the browser window and drag it upwards. If at any time a scrollbar appears then you know the layout won’t fit at that size. If you have chrome dev tools open it gives you the window size as you resize the browser so you can easily see where you get a problem. (The same applies for horizontal scrolling as usually that is the one that you are interested in and not vertical scrolling). As soon as you see the scrollbar then throw in a media query before that point and adjust the spacing of the content so that it no longer takes up as much space if your design allows this. Obviously as I keep saying once the viewport is filled up with content then you either have to remove content or change your design as once the glass is full it overflows.
You just don’t need access to any devices to do this sort of testing. It really is as simple as dragging the desktop window up and down and left and right. Of course testing on a real device is good for checking everything works and for seeing bugs and different behaviours but purely from a size perspective you can do this on the desktop.
If your layout creates a scrollbar then it will fail at that point on any device that is that size or smaller. You should factor in a buffer of course and change the layout before the scrollbar appears just to be safe.
That’s what my second example does except that there will always be a point where the layout is too big for the viewport. Depending on content that value may be very small but if you have a lot of content then that breakpoint is reached sooner.
This has nothing to do with tables as such but simply used the display:table properties of css to mimic the behaviour of tables. In this way the footer is always forced to the bottom of the viewport while the remaining content fills the rest of the screen no matter what.
I will try the browser resize method relative to my media queries. I didn’t know how that really translated. I get pixels are pixles, but wasnt sure. Im going to look more into your display:table suggestion too. I understand there will be a point the content is too much, so I will keep that in mind. Thank you for the perspectives and suggestions!
