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.
Related
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
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
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.
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.
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;
}