I have a simple layout, with a container that has horizontal and vertical margin as well as a max width and height. On a computer screen, the max width and height makes it so that the margin is basically irrelevant. When I resize the window to be smaller (horizontally), the container eventually takes up the whole screen minus the margin, then gets smaller as well and the margin makes it so that there is some space between its border and the edge of the screen. However, vertically the margin is simply ignored and the container eventually goes right to the edges. I don't understand why that is happening and how I can fix it.
Here is a working example: I am using Tailwind, so that's what I used for the example as well: https://play.tailwindcss.com/t9LmsfyVfH
Edit: Here's also an image to make my point clearer:
As you can see, the horizontal margin does exist, but it's outside the window/page (or in case of the playground: container which contains the rendered content).
<div class="flex h-full items-center justify-center">
This is because of h-full class in the element. it has height 100%, that forcing element to render and squeezing the inner content. As scroll has not consider margins thus overflow is not causing, though you have given margins to the inner child.
You can override the css by simply adding custom class or parent class minimum height .customClass.h-full{min-height: 100%;}
You can easily work around this issue by adding an empty element above the container to hold that space like <div class="my-6"></div> it's top + bottom margins are equal to the top margin of your main.my-12
https://play.tailwindcss.com/nAB8wcyXzV
Related
I'm trying to design a page with a set background color, but I'm having some difficulty.
I've got a parent container that sets the height with min-h-screen as well as assigns the background color. My inner child doesn't inherent height from the parent, so the behavior is off. I can fix this by using h-screen in the parent, but then any overflow content in the child isn't within the background.
I've thought of a few solutions, some using flexbox and another using overflow-scroll, but none of these feel like the proper solution. I was curious if someone could point out the correct way to solve this issue?
Here's an example of the undesirable behavior:
I've created a tailwind playground that shows the behavior here: https://play.tailwindcss.com/psM22NgfLj
On the top level container, you have min-h-screen which means the container should always be at least as tall as the viewport. You also have h-0 which isn't helpful. The first step would be to remove your fixed height. By setting the height to 0, the container is fixed to no greater than the height of the screen, impacting your scroll behaviour.
Next up, remove all occurrences of h-full.
The first child container, with bg-gray-800, was set to h-full so my assumption is that you want that to also be at least full height. Set flex on the top-level container.
https://play.tailwindcss.com/V4amySWzDs
Update: Based on your feedback, I've set the third-level content container to take up at least the remainder of the page height.
https://play.tailwindcss.com/DNSQwgRMzf
That was done by applying flex to the bg-gray-800 container, changing the direction to column, and putting flex-1 on the content that needs to expand to fill the remainder of the height.
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 have a div, .instagram_grid which has margin-left and margin-right set to auto, is relatively positioned, and has a width which for browse sizes 900px >makes the div be centered nicely in the page.
when I have the simple structure in the context of the rest of the CSS for a single page, the no longer becomes centered at browser width >1684px. In the Fiddle that follows I only have two lines that modify the div as a whole (and one just sets the background to pink). There are no media queries present, which suggests that it is the effect of some unseen preceding div/element causing the behavior.
https://jsfiddle.net/ebbnormal/m561tpnL/6/
The behaviour is what is expected with that markup.
The element is centered, but then you use relative positioning to show it 500px to the right of where it actually would be.
The .calc-text div above the .instagram_grid div causes its parent to overflow by setting margin-left:auto while simultaneously setting left: to a negative value, which isn't valid CSS.
I have overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
Please reference the following example:
In it, an outer div 200px wide is meant to establish our page width. It contains an inner div 400px wide, but with left/right negative margins of -100px.
My intended end result is that the browser register total content width at 200px, not 400px, but horizontal scrollbars show up as soon as the window is resized to less than 400px. What is going on here?
Negative margins don't adjust the width of the div. A negative left margin will move the div to the left of it's position in the flow of the page, and a negative right margin will allow other elements to overlap the right hand side of the div by the amount of the margin.
You can hopefully see what I mean in this jsFiddle.
From your question it sounds like you need overflow: hidden to contain a large div within a smaller one without spilling out of its boundaries.
Gareth's answer is correct. Even with negative margin, the div is still part of the standard page flow and will not be ignored with respect to layout. Genuine page content cannot be ignored for scrolling purposes.
However, if you're doing this for an aesthetic, such as having a shadow down the sides of the page that extends beyond your max width, this can be achieved with a background - this question should help.
as Gareth already mentioned, margins do not affect the box size. The solution is rather simple. The outer container needs to be 400px, this is what is going to trigger the horizontal scroll bars. The inner container needs to be 200px with 100px left and right margins. When you resize the window, the scroll bars appear as soon as you have gotten smaller than the outer container.
http://jsfiddle.net/58VFB/
Try adding this to your CSS...
body {
overflow-y: scroll;
overflow: -moz-scrollbars-vertical;
}