I have a 4:3 parent, and a child shrinked and centered. Finally a 4:3 child inside.
.table {
position: relative;
width: 400px;
height: 300px;
border: 1px solid;
}
.top {
position: absolute;
left: 15%;
right: 15%;
top: 20%;
bottom: 20%;
background: yellow;
}
.item {
position: absolute;
width: 10%;
height: 50%;
background: pink;
}
<div class="table">
4:3
<div class="top">
<div class="item">4:3</div>
</div>
</div>
.table has a 4:3 aspect ratio
.top is distanced by equal amount from the edges of .table
.item should have a 4:3 aspect ratio
In this code .top is centered and distanced equal from .table.
Problem is .item doesn't have 4:3 aspect ratio. (I gave it arbitrary height, width). Here's an codepen demo.
Note: .top is preferred to be distanced equal, it may be close to equal.
You can achieve this with CSS only and the padding-bottom technique to maintain the aspect ratio of the elements. It relies on the fact that percentage padding is calculated according to the with of the container (w3.org reference).
In the following example, I applied the aspect ratio on the .top element (centered it with absolute positioning and margin:auto; ) this way, you can size .item with width:100%; height:100%; as .top already has a 4:3 aspect ratio:
.table {
position: relative;
border: 1px solid;
width: 400px;
height: 300px;
}
.top {
position: absolute;
width: 70%;
height: 0;
padding-bottom: 52.25%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: yellow;
}
.item {
background: pink;
position: absolute;
width: 100%;
height: 100%;
}
<div class="table">4:3
<div class="top">
<div class="item">4:3</div>
</div>
</div>
This technique also allows you to make the elements responsive by applying the padding technique to the .table element too:
.table {
position: relative;
border: 1px solid;
width: 30%;
padding-bottom:22.5%;
}
.top {
position: absolute;
width: 70%;
height: 0;
padding-bottom: 52.25%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: yellow;
}
.item {
background: pink;
position: absolute;
width: 100%;
height: 100%;
}
<div class="table">4:3
<div class="top">
<div class="item">4:3</div>
</div>
</div>
You could use margin for .top:
.top {
margin: auto xx auto xx; /* top right bottom left */
}
And then you could set width and height of item:
.item{
height: 200px; /* example */
}
And then you use jQuery to set width:
var cw = $('.item').width();
$('.item').css({'height': 1.2 * cw +'px'});
Related
I have a square block of 100*100px, there is a container block that may be resized. I want to resize the inner block so it always be inside the parent without overflow and always square (to be resized dynamically)
Note: I want to maintain the square shape of the inner div
#child {
height: 100px;
width: 100px;
background-color: red;
}
#par {
height: 200px;
width: 200px;
border: 2px solid black;
}
<div id="par">
<div id="child">
</div>
</div>
If you want an element to be a square (ratio of 1:1) then just add padding-bottom: 100% to it. If you want that square to have content then the inner content of that square must be absolutely positioned.
body { width: 200px; }
.square {
padding-bottom: 100%; /* 1:1 aspect ratio (square) */
border:1px solid red;
position: relative;
}
<div class="square"></div>
You can place the square in a container/parent but you did not say how overflowing should behave?
.parent {
height: 200px;
width: 80%;
border: 1px dashed black;
}
.square {
padding-bottom: 100%; /* 1:1 aspect ratio (square) */
border:1px solid red;
position: relative;
}
.square .inner {
position: absolute;
top: 0; left: 0;
width: 100%;
overflow: auto;
}
<div class="parent">
<div class="child square">
<div class="inner">responsive square 1:1</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/mheoqbnw/
what you want is this:
http://marcj.github.io/css-element-queries/
element-queries, the future
Just give the #child element a max-height and max-width of 100%:
#child{
height:100px;
max-height:100%;
width:100px;
max-width:100%;
}
Try this
#par{
width: 200px;
height: 200px;
border:2px solid black;
overflow: hidden;
}
#par #child{
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background-color:red;
}
http://jsfiddle.net/voj2wsyb/
Give the child min, max and height 100% it's going to look to it's parent and with 100 % it's taking the same height
Here you are :-
.child
{
height:100px;
width:100px;
background-color:red;}
.par
{
position: relative;
height:200px;
width:200px;
border:2px solid black;
}
.par:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.par > .child{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<html>
<body>
<div class="par">
<div class="child">
</div>
</div>
</body>
</html>
If it helps, mark the problem solved.
I use EQCSS, an element queries plugin that lets me grab values from JavaScript to use in my CSS. Here's a demo with a column 33% wide that has a square that will resize responsively inside it:
<section>
<div></div>
</section>
<style>
section {width: 33%;}
#element 'div' {
$this {
width: auto;
height: eval("clientWidth")px;
background: red;
}
}
</style>
<script src=http://elementqueries.com/EQCSS.js></script>
In this snippet, the width: auto means it expands to fill its container. The eval('clientWidth') is inside of the element query, so it refers to this.clientWidth where the this is the element that matches the query. This means the height of our square will always be equal to its width! (a square).
Check it out: http://elementqueries.com
I also use this same technique to allow me to resize Youtube and Vimeo iframes according to their aspect ratio without needing a wrapper:
#element 'iframe' {
$this {
margin: 0 auto;
width: 100%;
height: eval("scrollWidth/(width/height)")px;
}
}
Responsive video scaling demo: http://elementqueries.com/demos/video-scaling.html
Hope this helps!
There is now the CSS attribute aspect-ratio:
body { width: 200px; }
.square {
border: 1px solid red;
aspect-ratio: 1 / 1;
width: 100px; /* <-- optional, this is only for the demo */
}
.not-a-square {
border: 1px solid green;
aspect-ratio: 2 / 1;
width: 100px; /* <-- optional, this is only for the demo */
}
<div class="square"></div>
<div class="not-a-square"></div>
Support: https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes
I have a container (main-container) with position=fixed.
I have other containers inside this container.
<div class="main-container">
<div class="container0">
<div class="container">
<div class="wrapper">
<iframe name="case-overlay-iframe" class="preview-iframe voice" allowfullscreen="true" src="https://cc-api-cp.adobe.io/api/v2/voice/assets/4ICee/video/embed?api_key=LucaApp1"></iframe>
</div>
</div>
</div>
</div>
I need the iframe to keep its aspect ratio of 16:9 as people resize the window.
I also need it to display in the center (vertically & horizontally centered)) every time.
I also need it to keep a maximum height and width of 1280px (width) and 720 (height).
I use the CSS below to achieve this, but unfortunately, the CSS doesn't do the following:
- The Iframe is not vertically and horizontally centered.
- The iframe must keep a width of calc(100% - 440px) (see below) but its width gets smaller than that.
.main-container {
position: fixed;
width: 100%;
height: 100%;
z-index: 1005;
top: 0px;
left: 0px;
overflow: auto;
}
.container0 {
position: absolute;
min-width: 700px;
min-height: 400px;
width: 100%;
height: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 200;
background: #262626;
}
.container {
background: #1c1c1c;
width: calc(100% - 440px);
height: 100%;
display: flex;
max-width: 1280px;
max-height: 720px;
}
.wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
width: 100%;
margin: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Can someone please help?
Hello Stack overflow users.
I'm in a bit of a struggle here, I have 4 divs.
I would like for div 4 to have it's width adjusted if the screen size is adjusted. Basically just stay within the other divs, and adjust.
Div 1,2 and 3 all have position:fixed to avoid them from moving when a user scrolls on the page.
But whatever I try, with width:autoETC. div 4 keeps going the full length behind div 3. I have a margin set for it to pass by div 1's width length.
I've been having a hard time wrapping my head around this one, the code for my divs are listed below.
.navbar-left {
position: fixed;
width: 325px;
top: 0px;
bottom: 0;
z-index: 1001;
height:auto;
}
.navbar-top{
width:100%;
height:60px;
position:fixed;
top:0;
z-index:1002;
}
.navbar-right{
width: 365px;
top:0;
height:100%;
position:fixed;
right:0;
}
Div 4 is not listed, as the code did not work. Any help is greatly appreciated.
Try this fiddle
If you need to use position fixed (really I didn't understand why) you could use percentage for main div, and pixels for sidebars.
In main div to set the width use this:
width: calc(100% - 400px);
Where 400px is the sum of the width of your both sidebars
HTML
<div clas="container">
<div class="top">top</div>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
CSS
.container {width: 100%; height: 100%;}
.top {
position: fixed;
clear: both;
width: 100%;
height: 20%;
background-color: #d5d5d5;
}
.left {
position: fixed;
top: 20%;
width: 40px;
float: left;
height: 80%;
background-color: green;
}
.main {
width: calc(100% - 80px);
height: 80%;
position: fixed;
top: 20%;
left: 40px;
background-color: grey;
}
.right {
width: 40px;
height: 80%;
position: fixed;
top: 20%;
right: 0;
background-color: green;
}
Try this code...
.div4{ width:calc(100% - 730px);
background-color: green;
margin:0 auto;
position:relative;
top:60px;}
where 730px is sum of left and right div widths...
Use percents for navbar-left, navbar-right and the middle portion.
Do not forget to set top:60px (height of navbar-top) for the left and right divs.
jsFiddle Demo
/* *CSS:* */
div {
position: relative;
box-sizing: border-box;
}
.navbar-top {
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
z-index: 2;
}
.navbar-left {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
left: 0;
z-index: 1;
}
.navbar-right {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
right: 0;
}
.myBody {
width: 60%;
margin: 60px auto 0px;
}
.navbar-top {
background: blue;
}
.navbar-left {
background: red;
}
.navbar-right {
background: green;
}
.navbar-top {
background: wheat;
}
<!-- **HTML:** -->
<div class="navbar-top">navbar-TOP</div>
<div class="navbar-left">navbar-LEFT</div>
<div class="navbar-right">navbar-RIGHT</div>
<div class="myBody"> My body lies over the ocean... hummmmm </div>
Give each a width that will equal to 100%. Give left div 20% div 4 60% and right div 20%. Or, with existing code, give 4th div 100%.
Is there some way to use position: absolute; with an element that's also display: table;?
In the example below I would imagine that the table would be 100% wide and (100% - 50px) high, but it's not. Instead, I'll have to wrap the table in an absolute positioned container and make it 100% wide and high. It feels stupidly redundant. Why doesn't absolute positioning a table work? Is there some way to make it work?
html, body {
min-height: 90%;
min-width: 90%;
height: 90%;
width: 90%;
}
body {
background-color: #333;
}
.table {
display: table;
border: 3px solid rebeccapurple;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
}
.cell {
display: table-cell;
height: 100%;
width: 33%;
border: 3px solid #f00;
}
.not-a-table {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background-color: rgba(0,200,0,.2);
}
<div class="table">
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="not-a-table"> </div>
Add width and height in .table
.table{
....
width: 100%;
height: calc(100% - 50px);
}
Elements with display:table property cannot be placed in absolute positioning without specifying width and height... Need to use display:block property.
I'm trying to center a div vertically using line-height, without specifying a set pixel value for the line-height. I need the line-height to expand to the size of it's div. Using '100vh' works, but viewport units aren't widely supported widely enough. Setting the line-height to 100% doesn't seem to work. Here's my HTML:
<div class="background">
<div class="lightboxbg">
<div class="wrapper">
<div class="centerme"></div>
</div>
</div>
</div>
And my CSS:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.background {
width: 90%;
height: 100%;
background-color: AntiqueWhite;
}
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%
}
.centerme {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
And here's a jsfiddle. The blue box would be centered if I could get the line-height of wrapper to expand to the height of wrapper, but I don't know how to go about doing that. Thanks for reading.
EDIT: Check out Nathan Lee's answer for a solution with table cells, Fredric Fohlin's for a pretty wild 'absolute positioning' answer, and MM Tac's for a solution using absolute positioning.
Here you go.
WORKING DEMO
The CSS Change:
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
display: table;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%;
display: table-cell;
}
Hope this helps.
Have a look at this idea. It may suit you: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
In your case the wrapper needs the relative positioning, and the "center me" the absolute positioning.
Replace .centerme with following css:
CSS:
.centerme {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; /* negative-half of element's width*/
margin-top: -50px; /* negative-half of element's height*/
}
Here is a DEMO and here is a full page RESULT.
UPDATE
To center div for variable length is simple, just remove height, width, margin-left, margin-top reference from .centerme css.
.centerme {
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
}
Here is a UPDATED DEMO.