I've got a container div with some padding around its content, a max height with overflow: auto, and some buttons at the bottom of the container. When the contents of the container grow enough so that a scrollbar appears, the bottom padding just disappears. This happens in seemingly every browser but Chrome.
.container {
border: 1px solid;
padding: 15px;
max-height: 200px;
overflow-y: auto;
display: inline-block;
width: 200px;
}
.footer {
background: green;
}
<div class="container">
<div style="height: 100px">Hello World</div>
<div class="footer">Footer Stuff</div>
</div>
<div class="container">
<div style="height: 200px">Hello World</div>
<div class="footer">Footer Stuff</div>
</div>
Here's what it looks like in Firefox. The right container is scrolled all the way down; you can see the lack of bottom padding.
Is this a known bug? Is there a recommended workaround?
(for the time being I'm going to make an "inner-container" class and put the padding on that instead of the outer "container", but it seems like I shouldn't need to do that)
Related
I'm working for a client that had the super good idea to integrate a horizontal scroll effect into his one pager flow layout. That means that the user keeps scrolling down, but at some point the page starts moving from right to left instead of bottom to top. I implemented that via ScrollMagic.
So the problem starts when it gets responsive. When I start scrolling horizontally, the screen is now fixed to the device height and I need to extend my page content to the right when it flows out, instead of the normal "my content just flows out of the bottom, which I can follow by vertically scrolling".
My first idea was to kind of manually solve the problem when managing the content. I.E. giving different versions of content for mobile and desktop content. But it seems devices are just too different and I need a CSS solution.
My Question is: Do you have any idea of how to make content grow horizontally? Like height auto, but width "auto" (which doesn't work bc it's not the same)? Or like display: inline-block in the following example, but the outer wrapper (yellow border) wrapping all sub-boxes, not just the first column.
#wrapper {
display: inline-block;
border: 2px solid #ffff00;
}
#main {
width: 100%;
height: 200px;
border: 1px solid #0000ff;
display: flex;
flex-flow: column wrap;
}
#main div {
width: 100%;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</div>
</body>
</html>
EDIT:
After reading Temani Afifs Answer I found an additional specification of my problem: I need it to work with "column-width", so that I am able to write text which automatically expands to a second column when using up all vertical space. Pretty much just like here. The only reason the linked example is not perfect for me is that the wrapping container div does not expand and a scrollbar appears. I want to be able to add another .container-div to the right.
Maybe using CSS grid:
#wrapper {
display: inline-block;
background:yellow;
}
#main {
max-height: 100vh; /* don't take more than the screen height */
border: 1px solid #0000ff;
box-sizing:border-box;
display: grid;
grid-auto-flow: column; /* column flow */
/* fill all the column and wrap to the next one if no more space */
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
}
#main div {
padding:20px;
}
body {
margin: 0;
}
<div id="wrapper">
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</div>
I was trying to get my header background image to reach the top of the viewport. There was a gap between the top of my image and the top of the viewport, and I wanted to fix it. I tried applying a margin to my <header> css, but this did nothing. What DID end up working was applying padding.
header {
text-align: center;
background: url("https://i.imgur.com/E4yIQba.jpg");
background-size: cover;
color: white;
padding: 1px 0px 0px 0px;
}
Everything looks good now, but does anyone know why adding 1px of PADDING to the top of the image resolved the issue, while attempting to add a MARGIN of 0px(margin: 0px 0px 0px 0px) did nothing? I thought margins were supposed to move elements closer and farther away from the edges of viewports. I am surprised that padding resolved my issue instead of margin. Thanks!
https://dash.generalassemb.ly/docmp0/build-your-own-blog-theme
Actually, margins are considered to be outside of the element, and margins of adjacent items will overlap, but on the other hand, paddings are considered to be inside of the element. So indeed an element's padding area is the space between its content and its border when an element margin area is a space between that element and elements around it.
So let's see this in an example.
div.container {
display: flex;
justify-content: space-between;
}
div.box>div {
height: 50px;
width: 50px;
border: 1px solid black;
text-align: center;
}
div.padding>div {
padding-top: 1rem;
}
div.margin>div {
margin-top: 1rem;
}
<div class="container">
<div>
<h3>Default</h3>
<div class="box">
<div>box A</div>
<div>box B</div>
<div>box C</div>
</div>
</div>
<div>
<h3>padding-top: 1rem;</h3>
<div class="box padding">
<div>box A</div>
<div>box B</div>
<div>box C</div>
</div>
</div>
<div>
<h3>margin-top: 1rem;</h3>
<div class="box margin">
<div>box A</div>
<div>box B</div>
<div>box C</div>
</div>
</div>
</div>
So as you can see in the example adding padding to each box will result in growing them in padding area, this will work the same for images.
Consider the following image as a content box, whenever you add padding it will apply to the innermost part of a box, and whenever you add margin it will apply to the outermost part of a box.
NOTE: Read more information about padding and margin.
I am trying to add a div above my content div with the same width.
I would like it to only push down the content div, but it causes the sidebar div to move down as well.
<div id="container">
<div id="new-div">new div</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
.
#container {
background: lightgrey;
width: 500px
}
#new-div {
background: darkred;
width: 300px
}
#content {
background: lightblue;
width: 300px;
height: 400px;
display: inline-block
}
#sidebar {
background: darkgreen;
width: 100px;
height: 400px;
float: right;
}
http://jsfiddle.net/zd9omqa7/2/
How can I avoid the sidebar div to move down? I would like it to always float in the right top corner.
The two easiest ways that spring to mind would be to either reorder the html so your sidebar comes first in the DOM:
http://jsfiddle.net/ctaylr/xxhdn1xb/1/
<div id="container">
<div id="sidebar">sidebar</div>
<div id="new-div">new div</div>
<div id="content">content</div>
</div>
or to use position absolute to brute-force move it to the top:
http://jsfiddle.net/ctaylr/warnjgp3/2/
(remember to position the container div relative for this to work)
Otherwise, you could look to wrap your left hand side "divs" in a container of its own.
Hope this helps!
I'm trying to center a div vertically in a parent div, where text is present. Here's what I've got:
It looks a little funny because the text seems to be centered properly, but the yellow boxes aren't. This is how I'm doing it:
.btn {
background-color: #ccc;
color: #000;
width: 200px;
border: solid 1px black;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.square {
background-color: #ff0;
width: 20px;
height: 20px;
display: inline-block;
}
.inner {
display: inline-block;
}
<div class="btn">
<div class="square"></div>
<div class="inner">Hello</div>
<div class="square"></div>
</div>
Should my usage of "table-cell" + vertical-align be working? I only care about html5, I'm really just targeting the latest versions of mobile safari, so don't have to worry about older browsers etc.
Here's a js fiddle of this:
http://jsfiddle.net/TrJqF/
Thanks
Set vertical-align:top on the square class. The extra space comes from space reserved for descendant text elements like j, g, y etc. that drop below the line.
jsFiddle example
Actually there is no difference between both the height. Apply yellow background color to inner class and see the difference in explicit and no height.
both square div doesn't have content and inner div have content. The css box aligning by itself based on its content. Add empty space to the square div as follows:
<div class="btn">
<div class="square"> </div>
<div class="inner">Hello</div>
<div class="square"> </div>
</div>
If you want you can add top and bottom margin 1 or 2 pixel which will show your expectation.
Some html:
<div style="height: 300px">
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
I want my inner div height to be not greater than parent div's and if it is greater then content div should have scroll, but if it is smaller it should be the same size with it's content.
I've tried to set inner's max_height=100%, but I can't make my content have scroll.
I want to do it without js
UPD: I do not know main div's height (300px is not constant)
UPD2: My main div has "max-height: 100%", so I do not know exact value
Demo:
http://jsfiddle.net/kzfRk/7/
Not sure I understand, but if your scroll bars are not appearing try:
#inner{overflow-y:scroll;}
Is this what you had in mind? (colours are just for ease of viewing) See live here.
css
.container{
height: 300px;
overflow: hidden;
border: 1px solid #000;
}
#inner{
max-height:300px;
overflow-y: auto; border: 1px solid #f00;
}
#title{ background-color: #eed;}
#content{background-color: #fee;}
html
<div class='container'>
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
Do you have a live example? It's difficult to work out what you are trying to do.
Do you want the parent div to fill the screen and the content to scroll withing it? If so, give your parent div a height of 100% and try applying the following style to your inner div:
height:100%; min-height: 100%; overflow:auto;
You set your height then use overflow to control the scrolling.
#inner{max-height:100%;overflow-y:scroll;}
Example: http://jsfiddle.net/calder12/drC3L/ Change the size of the outer div to anything you want, if there is too much content the inner div will scroll.
You need to set the inner div maximum height the same as the root div height. Using your fiddle, copy and paste the CSS below into your CSS file and it will work...
.container{
max-height: 100%;
border: 1px solid #000;
}
.inner{
max-height: 100px;
overflow-y: auto; border: 1px solid #f00;
}
.root{
height: 100px;
border: 1px solid;
}