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.
Related
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
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/
I'm building out a UI that requires a fixed position/sticky element at the bottom of the viewport with a width constrained by a main content area. The main content area is optionally flanked by (sibling) left and/or right sidebars with fixed widths, so I'm using Flexbox to build the three column structure with flex-grow: 1 on the main content.
I've learned from #Marc Audet's accepted answer at How can I make a fixed positioned div inherit width of parent? that setting width: inherit on the fixed element is typically how to solve this problem, but it only seems to work when there's a specified width on its parent, which doesn't help me considering I need the main content area to fill the remaining width of the page.
Does anyone have any ideas for getting around this? Check out my Fiddle for the code/example. Any help would be appreciated!
CSS
html {
box-sizing: border-box;
font: 400 16px/1.45 'Source Code Pro';
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
outline: none;
overflow-x: hidden;
}
body {
background: #121;
color: #FEF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100vw;
height: 100vh;
}
.container {
display: flex;
color: #fff;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
background: blue;
}
.left {
background: blue;
min-height: 100vh;
min-width: 150px;
flex-shrink: 0;
}
.middle {
background: green;
min-height: 100vh;
overflow: hidden;
width: calc(100vw - 400px);
padding-bottom: 60px;
flex-grow: 1;
flex-shrink: 0;
}
.middle .fixed-footer {
background: orange;
position: fixed;
bottom: 0;
width: 100vw;
width: inherit;
padding: 16px 0;
overflow-x: hidden;
}
.right {
background: blue;
min-height: 100vh;
min-width: 250px;
flex-shrink: 0;
}
#media screen and (min-width: 640px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
overflow-y: auto;
}
}
Added Star Wars ipsum content to demonstrate .middle's vertical flexibility and how .fixed-footer is stationary and is .middle's width.
DEMO
I have a page that needs to stretch and resize with with window and I've managed to do that but I need that the "inner div" (#pgContent) stretch if the window is resized to higher dimensions but that it doesn't shrink more than, let's say for example 800 x 600 px.
As I have it now it stretches well but it also shrinks more than I want!
It's working as I want in width but not in height!?
Here's a visual example:
My CSS:
* {
margin: 0;
padding: 0;
outline: 0;
}
/*| PAGE LAYOUT |*/
html, body {
height: 100%;
width: 100%;
/*text-align: center;*/ /*IE doesn't ~like this*/
cursor: default;
}
#pgWrapper {
z-index: 1;
min-height: 100%;
height: auto !important;
/*min-height: 600px;*/ /* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
#pgContent {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 50px;
overflow: hidden;
background: #CCC;
}
#footWrapper {
z-index: 2;
height: 50px;
min-width: 940px;
position: absolute;
left: 30px;
right: 30px;
bottom: 0px;
background: #C00;
}
/*| END PAGE LAYOUT |*/
And the HTML:
<body>
<div id="pgWrapper">
<div id="pgContent">
This DIV should stretch with window but never lower than for example 800px x 600px!<br />
If window size is lower then scrollbars should appear.
</div>
</div>
<div id="footWrapper">
<div id="footLft"></div>
<div id="footRgt"></div>
</div>
</body>
If someone could give me a help on this I would appreciate.
Thanks in advance.
The second min-height will overwrite the first one.
Use a height of 100% and min-height of 680px;
#pgWrapper {
z-index: 1;
min-height: 600px;
height: 680px;
min-width: 800px;
width: 100%;
}
I belive height auto is messing with your stretching, commenting it out made your styles behave much better. Of course it might be down to different browsers
#pgWrapper {
z-index: 1;
min-height: 100%;
/*height: auto !important;*/
min-height: 680px;
/* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
Working sample:
http://jsfiddle.net/QqMeC/4/
Have you tried using the following in #pgWrapper
overflow: auto;
DEMO: http://jsfiddle.net/jonocairns/LA8hg/
This is a two part question, I believe, with a third and fourth, bonus twist.
What am I doing wrong to get the height of the purple set to 100% to be a little bit too high?
How can I set the width of the purple so that it goes 100% of the remaining space?
Is the only way to get rid of the spacing between the yellow and the purple to alter the HTML code by putting everything on the same line?
How can I remove the margin that the green border holds between self and the outer component?
jsfiddle.net/jL8e5/1/
div.faqticleList {
background: #ffdd00; /* yellow */
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff; /* purple */
display: inline-block;
padding: 3px;
width: auto;
height: 100%;
}
I'm not sure if I completely understand your goals. I assumed:
Fixed width left
Variable width right
http://jsfiddle.net/wXme4/
CSS
body{
margin: 0;
padding: 0;
width: 100%;
}
div.faqticleList {
background: #ffdd00;
width: 200px;
height: 100%;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
width: 100%;
height: 100%;
margin-left: -203px;
padding-left: 203px;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100px;
//overflow: hidden;
//overflow: auto;
}
div.faqticleList div, div.faqticlePreview div {
padding: 3px;
}
Script
document.getElementById("faqticleList").innerHTML = "<div>faqticleList</div>";
document.getElementById("faqticlePreview").innerHTML = "<div>faqticlePreview</div>";
Updated Demo
Float the left column, and make the right column a regular block element with overflow: hidden. That might be the simplest way to do it.
CSS
div.faqticleList {
/* display: inline-block; */
float: left;
...
}
div.faqticlePreview {
/* display: inline-block; */
/* width: auto; */
overflow: hidden;
...
}
This will do what you want, but I would recommend you set your height to fixed, or it wont work,
div.faqticleList {
background: #ffdd00;
display: inline-block;
width: 30%;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
width: 69%;
height: 100%;
clear: both;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100%;
//overflow: hidden;
//overflow: auto;
display: block;
clear: both;
}
You can use jquery to dynamically find the width.
JS:
document.getElementById("faqticleList").innerHTML = "faqticleList";
document.getElementById("faqticlePreview").innerHTML = "faqticlePreview";
var difWidth = $('.container').width() - 212;
$('#faqticlePreview').css( "width", difWidth )
Then, in your CSS, remove the width from faqticlePreview and float the other div left:
div.faqticleList {
background: #ffdd00;
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
padding: 3px;
height: 100%;
}
Updated jsfiddle:
http://jsfiddle.net/a2Run/
Note: The width you are subtracting needs to be 212. 200px width from the first div, plus 3px of padding on each side of both divs 200+(3x4)=212