I have a simple content/sidebar layout with a sticky sidebar. In firefox if the sidebar is taller than the content, you can scroll down infinitely, the scrollbar just gets smaller and smaller. Here is a demo:
div {
height: 200px;
overflow: auto;
border: 1px solid #000;
}
p {
display: block;
width: 60%;
float: left;
background: blue;
height: 100px;
}
nav {
display: block;
position: -webkit-sticky;
position: sticky;
top: 0;
float: right;
width: 30%;
height: 300px;
background: green;
}
<div>
<p></p>
<nav></nav>
</div>
Works fine in Safari and Chrome, but i'm unable to fix this in Firefox. Any ideas what might be the issue? Thanks
Related
I have a fixed div inside of a relative positioned div. I want the div to be fixed to the top of the page and contained within my relative positioned parent.
A common example of this use case is a sticky website sidebar in a two column layout.
As I understand. Setting the top: 0 on my fixed div will fix it to the top. Setting margin-left: 0 on my fixed div will align it with its relatively positioned parent.
This works fine on all browsers except Safari (version < 10). Is there any way to fix this issue that doesn't involve user agent sniffing.
Here is a bare-minimum fiddle illustrating isolating issue below:
http://jsfiddle.net/vgc1ekbg/4/
Here's another fiddle illustrating the issue in the context of a two-column website layout: http://jsfiddle.net/dpmj3y0n/1/
Edited based on last fiddle shared in comments.
* {
box-sizing: border-box;
}
.wrapper {
max-width: 960px;
height: 2000px;
margin: 0 auto;
text-align: center;
/* line-height: 580px; */
}
.layout {
height: 2000px;
/*padding-left: 20px;*/
/* padding-right: 350px; */
/*margin-right: 192px;*/
}
.layout:before, .layout:after {
content: "";
display: table;
}
.layout:after {
clear: both;
}
.col-main {
width: calc(100% - 184px);
margin-left: -8px;
margin-top: -8px;
height: 580px;
float: left;
position: relative;
left: 200px;
background-color: #f16529;
line-height: 580px;
}
.col-sub {
/* margin-right: -100%; */
position: absolute;
top: 0;
left: 0;
width: 200px;
line-height: 580px;
/* height: 580px; */
background-color: #f0dddd;
float: left;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100px;
overflow: hidden;
z-index: 100;
background-color: gray;
color: red;
line-height: 100px;
}
<div class="wrapper">
<div class="layout">
<div class="col-main">Main Content</div>
<div class="col-sub">Sidebar Content
<div class="sticky">
Sticky Content
</div>
</div>
</div>
</div>
if you intent to center align, you can use left: 50%; and transform: translateX(-50%); to both .column and .sticky
http://jsfiddle.net/vgc1ekbg/5/
So I have html like this
<div class="search-form-wrapper">
</div>
<div class="results-view-wrapper">
</div>
<div class="quick-visualization-wrapper"/>
This is the CSS for them -
.search-form-wrapper {
border-right: solid 1px #d1d2d4;
display: inline-block;
float: left;
height: 100%;
max-width: 350px;
min-height: 900px;
min-width: 300px;
position: relative;
width: 30%;
}
.results-view-wrapper {
display: inline-block;
height: 100%;
position: absolute;
padding-left: 10px;
}
.quick-visualization-wrapper {
display: inline-block;
}
The first two divs are displayed next to each other, but the last div appears behind the results-view-wrapper, (so next to the search-form-wrapper). I thought it might be because results-view-wrapper is position absolute, but when I took that out the div just moved downwards and was still behind results-view-wrapper.
How do I make it so that it appears next to the results-view wrapper?
You are not specifying the width of the second and third divs. You need to do it.
Why you have position:absolute on that div ? Also, don't use float on an element with display:inline-block.
http://plnkr.co/edit/6wLokBiZUw33SKmZtjiC?p=preview
Give this css a try. It has to do with your float and absolute position. Also the last div didn't have a width, so it was easily visible.
.search-form-wrapper {
border-right: solid 1px #d1d2d4;
display: inline-block;
height: 100%;
max-width: 350px;
min-height: 900px;
min-width: 300px;
position: relative;
width: 30%;
background-color:red;
}
.results-view-wrapper {
display: inline-block;
min-height: 900px;
height: 100%;
padding-left: 10px;
background-color:green;
}
.quick-visualization-wrapper {
display: inline-block;
background-color:black;
min-height: 900px;
height: 100%;
width:10px;
}
I wish to have an undetermined number of divs along the bottom, stacked horizontal. When there are too many to fit, they will be scrollable.
The div has a list inside it. When this list grows it will have a vertical scroll bar. The problem is that the bottom of that vertical scroll bar is under the parent horizontal scroll bar. How can I make the whole scrollbar accessable the whole time the outer horizontal scroll bar is showing or not?
I am using chrome where the problem looks more severe than IE.
JSFiddle
Here is my html where the class window is repeated
Cut down html
<div class="outer">
<div class="window">
<div class="heading">heading</div>
<div class="list">
listing<br>..... repeated ....
</div>
</div>
..... window class repeated ....
</div>
css
body
{
overflow: scroll;
}
.outer
{
position: fixed;
height: 200px;
bottom: 0;
left: 0;
width: 100%;
overflow-y: auto;
border: 1px solid red;
white-space: nowrap;
}
.window
{
border: 1px solid blue;
background-color: White;
width: 200px;
height: 100%;
display:inline-block;
white-space:normal;
}
.heading
{
color: purple;
background-color: #c0c0c0;
}
.list
{
overflow-y: scroll;
height: 100%;
}
Chrome was doing something wacky with positioning. Padding-bottom: 20px seemed to fix it in Chrome without screwing over IE or Firefox. I did not test on Safari, but it should work there too.
body
{
overflow: scroll;
}
.outer
{
position: fixed;
height: 200px;
bottom: 0;
left: 0;
width: 100%;
overflow-y: auto;
border: 1px solid red;
white-space: nowrap;
padding-bottom: 20px;
}
.window
{
border: 1px solid blue;
background-color: White;
width: 200px;
height: 100%;
display:inline-block;
white-space:normal;
}
.heading
{
color: purple;
background-color: #c0c0c0;
}
.list
{
overflow-y: scroll;
height: 100%;
}
I'm centering a div inside another div using percentage margins. I do this because the parent div is going to change sizes based on browser size.
See this jsfiddle for a demo.
My CSS:
#test-wrap {
position: absolute;
width: 400px;
height: 250px;
background-color: pink;
}
.white-wrap {
position: absolute;
width: 50%;
height: 50%;
background-color: white;
left: 50%; margin-left: -25%;
top: 50%; margin-top: -25%;
}
This works fine in Safari, but in Chrome the child div is appearing higher than it should.
Perhaps there's a better way to achieve such a thing, that works on all browsers and doesn't rely on pixel margins? Any suggestions would be greatly appreciated!
You should use the attribute margin. So your CSS of white-wrap should be:
.white-wrap {
position: relative;
margin: 0 auto;
width: 50%;
height: 50%;
background-color: white;
}
This is my favorite way to accomplish this (works in all modern browsers and IE8+).
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
And here is a jsFiddle that mimics your example.
Try
#test-wrap {
display: table-cell;
width: 500px;
height: 500px;
background: gray;
vertical-align: middle;
text-align: center;
}
.white-wrap {
display: inline-block;
width: 200px;
height: 200px;
background: red;
}
You should set those properties too :
* {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
Once you defined a size for a DIV or anything else, the margin, padding and everything will be in the sizing and won't increase the size.
I'm not sure I can explaint clearly what is the problem, so please be understanding.
I have this HTML code:
<div id="container">
<div id="navbar">
...
</div>
<div id="content">
...
</div>
</div>
Here is the CSS code:
#container {
display: block;
width: 640px;
height: 480px;
}
#navbar {
display: block;
position: fixed;
width: 640px;
height: 70px;
}
#content {
display: block;
marign: 70px 0 0 0;
width: 640px;
height: 410px;
overflow-y: auto;
}
It works fine on desktop and any Android-base browser, but in iPhone's Safari... When I zoom in on this page the content works fine, but the fixed element stay on position relative to screen. Every other element moving fine.
What is the problem? I don't have idea...
An element with fixed position is positioned relative to the browser window.
You should give top: 0; and/or left:0 etc
try on this code http://jsfiddle.net/nandhakumarsri9/bkwLG/
#container {
display: block;
width: 640px;
height: 480px;
border: 1px solid #000;
box-sizing: border-box;
position: relative;
}
#navbar {
display: block;
position: absolute;
width: 640px;
height: 70px;
border: 1px solid #F00;
box-sizing: border-box;
}
#content {
display: block;
width: 640px;
height: 410px;
overflow-y: auto;
border: 1px solid #00F;
box-sizing: border-box;
position: absolute;
top: 70px;
}
Most of mobile browsers have problem with fixed positioning. Try to use jQuery mobile framework with data-position="fixed" attribute.