I currently have a modal which i want to use as overlay over webpage.
HTML:
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="imgCon">
<img class="overlayimg" src="img/trendoverlay.png" />
<img class="overlayimg" src="img/trendtimeline.png" style="display: block"/>
</div>
</div>
CSS:
*{
box-sizing: border-box;
}
body{
width:100%;
}
.imgCon{
position: absolute;
height: 100%;
width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
.overlayimg{
max-width:100%;
max-height: 100%;
height:auto;
}
However here's the problem. The first image(top one) when only image. It's perfect. It works fine.
The image that goes underneath has to stay inside the same DIV as the other image, be as wide as the upper image. But height is fixed. Is there a way to achieve this so they still scale with the padding of 51.5px left/right and 73px at bottom?
picture with more info:
Example
Fiddle:
https://jsfiddle.net/4n1quv9n/1/#&togetherjs=sT7KVDhPT8
As you can see the top image scales how I want it to scale. That it keeps it's aspect ratio but had a minimum left/right and bottom. The image underneath the one is suppose to have the same width as the top image. But the height has to be fixed at 110px. But the Div which contains the images must keep the padding at those 2 minimum at the sides and bottom.
This is going wrong:
https://imgur.com/a/ILPpO
Here the bottom image must also scale as wide as the top image. And actually they also need to stick together so it looks like 1 image instead of 2 seperate ones.
Give this a Try
CSS
body{
position: relative;
}
.wrapper{
position: relative;
}
div.image-container{
position: absolute;
margin:auto;
height: 100%;
max-width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
img{
max-width:100%;
}
HTML
<body>
<div class="wrapper">
<div class="image-container">
<img src="http://imgur.com/c7uASdV.png">
<img src="http://imgur.com/60d6BUt.png" style="height: 110px">
</div>
</div>
</body>
Link for reference
You could give a try to display:table properties to draw a cell at middle to hold and resize first image, and absolute positionning for second image :
#modal {
display: table;
height: 100vh;
width: 100vw;
padding-bottom: 73px;/* bottom limits */
box-sizing: border-box;
}
#modal:before,
#modal:after {
content: '';
padding-left: 51px;/* sides limits ... pixel cannot be cut in hlves */
display: table-cell;
}
.modchild {
display: table-cell;
position: relative;
margin-bottom: 100px;/* room for img 2 */
width: 1%; /* will expand to fit image width and will stand at middle */
}
img[src*="x212"] {
height: 100vh;/* size it */
max-height: calc(100vh - 100px - 73px);/* downsize to use */
display: block;/* or reset vertical-align*/
}
img[src*="x100"] {/* size and stretch it */
margin: 0;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100px;
bottom: 0;
}
* {margin:0;}
<div id=modal>
<div class=modchild>
<img src="http://dummyimage.com/400x212&text=keep_ration" />
<img src="http://dummyimage.com/400x100/ff0&text=distort" />
</div>
</div>
fiddle example : https://jsfiddle.net/4n1quv9n/4/
I am trying to put a position:fixed div inside an another div. I want a fixed div which has a width:100%; so it will be great for mobile and desktop at the same time.
Here is my JSfiddle
SF wants some code:
<div id="container">
<div id="item">This div is good div</div>
<div id="fixed">Right side of this div overflow its parent!!! </div>
</div>
An element with position: fixed; ignores the parent size because it is relative only to the viewport:
MDN:
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
You can:
Try giving it position: absolute; and set the container to position: relative;.
Use position: fixed; and set the size explicitly.
You can use the calc() method to adapt the viewport size. Just subtract right and left margin from the 100%:
Edit: I added a min-height to the body to see the "fixed-effect" on scrolling
body {
margin: 0;
min-height: 1000px;
}
#container {
margin: 10px;
background: black;
color: white;
}
#item {
height: 50px;
width: 100%;
}
#item {
background: blue;
}
#fixed {
height: 50px;
width: calc(100% - 20px);
background: green;
position: fixed;
}
<div id="container">
<div id="item">Normal div</div>
<div id="fixed">Fixed div</div>
</div>
I'm looking for a way to make a div sticky to the bottom, like a footer, but inside a bootstrap grid, so not over the whole width.
Bootstrap has an example of a sticky footer, I tried to tweak it to make it work in my case but couldn't.
This is another approach, but also assumes your sticky div is not nested inside another div.
Below is my code, I need to make .app-footer sticky to the bottom over the width of it's parent div.
<div class="row main">
<div class="col-xs-2 col-md-4 col-lg-5">...</div>
<div class="col-xs-8 col-md-4 col-lg-2">
<div class="app"></div>
<div class="app-footer"></div>
</div>
<div class="col-xs-2 col-md-4 col-lg-5">...</div>
</div>
Edit: the CSS I've tried but doesn't work:
html,
body {
height: 100%;
}
/* Wrapper for page content to push down footer */
.app {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
.app-footer {
height: 60px;
background-color: #f5f5f5;
}
Edit: Ok, got it. The solution seems to be to add {position: relative; height: 100%} to ALL parent divs. In my case I had the grid wrapped in <div class="row">, when I added it there too it worked.
if you want to make the nested child div positioned to the bottom of the parent div:
add {position:relative} to the css of the the parent div;
add {position:absolute;bottom:0} to the css of the the child div;
the nested div should be the same width as the parent (taknig into account the padding and margins), but you could force it to be by adding width:100% to the child div's css
Use this css to make your app-footer div sticky:
.app-footer {
height: 60px;
background-color: #f5f5f5;
position: fixed;
bottom:0px;
left:0px;
}
You could try this in your CSS:
.app-footer{
position: absoute;
bottom: 0px
width: 100%;
height: 80px;
background-color: red;
}
In my layout, I am trying to output php generated items.
Each item retrieved from the database has a title, an image and a description.
I am trying to generate a layout that would have a thumbnail header composed of the img as a background (with the css style border-radius: 50%) and the title as a banner centered in the middle and taking the whole width. But using top 50% on the absolutely positioned div.title centers via the top edge and the div.title's height is dependent on font size.
I am wondering if there is a way to perfectly center the title, while keeping the border-radius effect considering that the only actual known dimension is the div.item's width and all height data is ultimately determined by .thumbnail-wrapper img and .title's font-size
the html is
<div id="container">
<div class="item">
<div class="thumbnail-wrapper">
<img />
<div class="title">Title</div>
</div>
<div class="content">Content</div>
</div>
</div>
The CSS
#container {
width: 600px;
}
.item {
position: relative;
display: inline-block;
width: 50%;
}
.thumbnail-wrapper {
text-align: center;
position: relative;
}
.thumbnail-wrapper img {
border-radius: 50%;
}
.title {
width: 100%;
position: absolute;
top: 50%; /* this is the problem */
}
Thanks!
JSFiddle example
Try this CSS for centering an absolutely positioned element (i.e. add it to div.title):
/* centering css */
top: 50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
Updated your JSFiddle Demo
Reference
I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio).
HTML
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<IMG HERE>
</div>
</div>
CSS
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
How can I vertically align the IMG inside the container? All my images have variable heights and the container can't have a fixed height/line height because it's responsive... Please help!
Here is a technique to align inline elements inside a parent, horizontally and vertically at the same time:
Vertical Alignment
1) In this approach, we create an inline-block (pseudo-)element as the first (or last) child of the parent, and set its height property to 100% to take all the height of its parent.
2) Also, adding vertical-align: middle keeps the inline(-block) elements at the middle of the line space. So, we add that CSS declaration to the first-child and our element (the image) both.
3) Finally, in order to remove the white space character between inline(-block) elements, we could set the font size of the parent to zero by font-size: 0;.
Note: I used Nicolas Gallagher's image replacement technique in the following.
What are the benefits?
The container (parent) can have dynamic dimensions.
There's no need to specify the dimensions of the image element explicitly.
We can easily use this approach to align a <div> element vertically as well; which may have a dynamic content (height and/or width). But note that you have to re-set the font-size property of the div to display the inside text. Online Demo.
<div class="container">
<div id="element"> ... </div>
</div>
.container {
height: 300px;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
#element {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
The output
Responsive Container
This section is not going to answer the question as the OP already knows how to create a responsive container. However, I'll explain how it works.
In order to make the height of a container element changes with its width (respecting the aspect ratio), we could use a percentage value for top/bottom padding property.
A percentage value on top/bottom padding or margins is relative to the width of the containing block.
For instance:
.responsive-container {
width: 60%;
padding-top: 60%; /* 1:1 Height is the same as the width */
padding-top: 100%; /* width:height = 60:100 or 3:5 */
padding-top: 45%; /* = 60% * 3/4 , width:height = 4:3 */
padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9 */
}
Here is the Online Demo. Comment out the lines from the bottom and resize the panel to see the effect.
Also, we could apply the padding property to a dummy child or :before/:after pseudo-element to achieve the same result. But note that in this case, the percentage value on padding is relative to the width of the .responsive-container itself.
<div class="responsive-container">
<div class="dummy"></div>
</div>
.responsive-container { width: 60%; }
.responsive-container .dummy {
padding-top: 100%; /* 1:1 square */
padding-top: 75%; /* w:h = 4:3 */
padding-top: 56.25%; /* w:h = 16:9 */
}
Demo #1.
Demo #2 (Using :after pseudo-element)
Adding the content
Using padding-top property causes a huge space at the top or bottom of the content, inside the container.
In order to fix that, we have wrap the content by a wrapper element, remove that element from document normal flow by using absolute positioning, and finally expand the wrapper (bu using top, right, bottom and left properties) to fill the entire space of its parent, the container.
Here we go:
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Here is the Online Demo.
Getting all together
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/150x150" alt="">
</div>
</div>
.img-container {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
Here is the WORKING DEMO.
Obviously, you could avoid using ::before pseudo-element for browser compatibility, and create an element as the first child of the .img-container:
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
UPDATED DEMO.
Using max-* properties
In order to keep the image inside of the box in lower width, you could set max-height and max-width property on the image:
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%; /* <-- Set maximum height to 100% of its parent */
max-width: 100%; /* <-- Set maximum width to 100% of its parent */
}
Here is the UPDATED DEMO.
With flexbox this is easy:
FIDDLE
Just add the following to the image container:
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex; /* add */
justify-content: center; /* add to align horizontal */
align-items: center; /* add to align vertical */
}
Use this css, as you already have the markup for it:
.img-container {
position: absolute;
top: 50%;
left: 50%;
}
.img-container > img {
margin-top:-50%;
margin-left:-50%;
}
Here is a working JsBin: http://jsbin.com/ihilUnI/1/edit
This solution only works for square images (because a percentage margin-top value depends on the width of the container, not the height). For random-size images, you can do the following:
.img-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* add browser-prefixes */
}
Working JsBin solution: http://jsbin.com/ihilUnI/2/edit
You can center an image, both horizontally and vertically, using margin: auto and absolute positioning. Also:
It is possible to ditch extra markup by using pseudo elements.
It is possible to display the middle portion of LARGE images by using negative left, top, right and bottom values.
.responsive-container {
margin: 1em auto;
min-width: 200px; /* cap container min width */
max-width: 500px; /* cap container max width */
position: relative;
overflow: hidden; /* crop if image is larger than container */
background-color: #CCC;
}
.responsive-container:before {
content: ""; /* using pseudo element for 1:1 ratio */
display: block;
padding-top: 100%;
}
.responsive-container img {
position: absolute;
top: -999px; /* use sufficiently large number */
bottom: -999px;
left: -999px;
right: -999px;
margin: auto; /* center horizontally and vertically */
}
<p>Note: images are center-cropped on <400px screen width.
<br>Open full page demo and resize browser.</p>
<div class="responsive-container">
<img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
<img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
<img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
<img src="http://lorempixel.com/200/200/sports/6/">
</div>
Try this one
.responsive-container{
display:table;
}
.img-container{
display:table-cell;
vertical-align: middle;
}
Here's a technique that allows you to center ANY content both vertically and horizontally!
Basically, you just need a two containers and make sure your elements meet the following criteria.
The outher container :
should have display: table;
The inner container :
should have display: table-cell;
should have vertical-align: middle;
should have text-align: center;
The content box :
should have display: inline-block;
If you use this technique, just add your image (along with any other content you want to go with it) to the content box.
Demo :
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #fff;
padding : 12px;
border : 1px solid #000;
}
img {
max-width : 120px;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
<img src="https://i.stack.imgur.com/mRsBv.png" />
</div>
</div>
</div>
See also this Fiddle!
I came across this thread in search of a solution that:
uses 100% of the given image's width
keeps the image aspect ratio
keeps the image vertically aligned to the middle
works in browsers that do not fully support flex
Testing some of the solutions posted above I didn't find one to meet all of this criteria, so I put together this simple one which might be useful for other people needing to do the same:
.container {
width: 30%;
float: left;
border: 1px solid turquoise;
margin-right: 3px;
margin-top: 3px;
}
.container:last-of-kind {
margin-right: 0px;
}
.image-container {
position: relative;
overflow: hidden;
padding-bottom: 70%;
/* this is the desired aspect ratio */
width: 100%;
}
.image-container img {
position: absolute;
/* the following 3 properties center the image on the vertical axis */
top: 0;
bottom: 0;
margin: auto;
/* uses image at 100% width (also meaning it's horizontally center) */
width: 100%;
}
<div class="container">
<div class="image-container">
<img src="http://placehold.it/800x800" class="img-responsive">
</div>
</div>
<div class="container">
<div class="image-container">
<img src="http://placehold.it/800x800" class="img-responsive">
</div>
</div>
<div class="container">
<div class="image-container">
<img src="http://placehold.it/800x800" class="img-responsive">
</div>
</div>
Working example on JSFiddle
Try
Html
<div class="responsive-container">
<div class="img-container">
<IMG HERE>
</div>
</div>
CSS
.img-container {
position: absolute;
top: 0;
left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}
html code
<div class="image-container">
<img src=""/>
</div>
css code
img
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Make another div and add both 'dummy' and 'img-container' inside the div
Do HTML and CSS like follows
html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}
<div class="responsive-container">
<div class="inner-container">
<div class="dummy">Sample</div>
<div class="img-container">
Image tag
</div>
</div>
</div>
Instead of 100% for the 'responsive-container' you can give the height that you want.,