I would like to vertically align two images (with different height but same width) AND get both of them fitting the screen.
I could put them in different div.
Centered or not. Doesn't matter. (they got to fit the screen)
I have already read some posts here about this problem, but without success.
I would solve this problem with css, but i could use javascript or jquery too.
Any help will be appreciated.
sample image ( drawing image and blue band bottom):
here the code:
<html lang="en">
<head>
<style>
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
background-image: url("http://frisketti.altervista.org/img/sfondo.jpg");
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
footer {
display: block;
min-height: 100px;
background: #ffeebb;
background-image: url("http://frisketti.altervista.org/img/footer.jpg");
}
</style>
</head>
<body>
<div id='main'>
<article></article>
</div>
<footer></footer>
</body>
</html>
The property vertical-align doesn't work with min-height. It's working with height or padding.
Related
The markup and styling given at the end of this description produce different views in Chrome and Firefox (as the following snapshot shows).
Chrome stretches the image inside cancel-icon div to take full height of the parent but Firefox keeps the image at original height. To keep things consistent i had to specify image width (commented lines in the styling code below).
.content-wrapper {
display: flex;
border: 1px solid #DA291F;
height: 40px;
}
.timer-text {
display: flex;
align-items: center;
color: #313131;
padding: 0 5px;
}
.cancel-icon {
display: flex;
padding: 0 5px;
}
/* .cancel-icon img {
width: 20px;
} */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="content-wrapper">
<div class="timer-text">
<div>00:00:00</div>
</div>
<div
class="cancel-icon">
<img src="https://svgshare.com/i/mmR.svg">
</div>
</div>
</body>
</html>
Alright, I inspected the elements in both browsers and did some research, and found the reason that causes this is User-agent stylesheets.
What are User-agent stylesheets?
User-agent, or browsers, have basic style sheets that give default styles to any document. These style sheets are named user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same.
to see all related details you can check it here on developer.mozilla.org
So, what to do about it?
Some developers suggest using a CSS reset stylesheet, such as normalize.css. I actually tried it with your code but didn't work in your case. Also if you use it, then you will need to use a lot of !important in your CSS code.
What should I do then?
If you leave anything without style, then User-agent stylesheets will style it for you according to each browser.
In your case, I found that it happened because you didn't give your SVG any height and width, and that's why chrome user agent stylesheet styled it for you.
I also noticed that it happened because of the display flex for its parent.
After I tried some solutions, I found the easiest solution is to add align-items: center; to the SVG parent.
.content-wrapper {
display: flex;
border: 1px solid #DA291F;
height: 40px;
}
.timer-text {
display: flex;
align-items: center;
color: #313131;
padding: 0 5px;
}
.cancel-icon {
display: flex;
align-items: center;
padding: 0 5px;
}
/* .cancel-icon img {
width: 20px;
} */
<div class="content-wrapper">
<div class="timer-text">
<div>00:00:00</div>
</div>
<div class="cancel-icon">
<img src="https://svgshare.com/i/mmR.svg">
</div>
</div>
Browsers support is a big problem and you must consider that in every development and design you do. and sometimes you can't just do what you want, otherwise it won't be supported in all browsers. So I suggest you to use png instead of SVG and give it a specific hight and it will be the same size in all browsers.
.content-wrapper {
display: flex;
border: 1px solid #DA291F;
height: 40px;
align-items: center;
}
.timer-text {
display: flex;
align-items: center;
color: #313131;
padding: 0 5px;
}
.cancel-icon {
display: flex;
padding: 0 5px;
height: 80%;
}
/* .cancel-icon img {
width: 20px;
} */
<body>
<div class="content-wrapper">
<div class="timer-text">
<div>00:00:00</div>
</div>
<div
class="cancel-icon">
<img src="https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/344/external-stop-multimedia-tanah-basah-glyph-tanah-basah.png">
</div>
</div>
</body>
Adding flex-grow: 1 to .cancel-icon should work. Depending on main/cross axis, an element should grow horizontally/vertically with flex-grow set to 1.
By default flex-grow = 0, meaning that the element is not allowed to grow. I am not sure why Chrome does not honor that. However, despite the same code base as Chrome, Edge does.
.content-wrapper {
display: flex;
border: 1px solid #DA291F;
height: 40px;
}
.timer-text {
display: flex;
align-items: center;
color: #313131;
padding: 0 5px;
}
.cancel-icon {
display: flex;
padding: 0 5px;
flex-grow: 1; /* ADD */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="content-wrapper">
<div class="timer-text">
<div>00:00:00</div>
</div>
<div class="cancel-icon">
<img src="https://svgshare.com/i/mmR.svg">
</div>
</div>
</body>
</html>
I know that we can create a responsive horizontal image easily, like that.
.img-horiz-resp {
max-width:100%;
height:auto;
}
But, in my case I need :
a header on top
a content (for now it can be a simple image)
a footer
Then, when resizing the browser vertically, I wish that the 'content' adapt its size.
I have try here : https://codepen.io/cdemez/pen/qBbKVYp
But without success.
By using VH for the height you can get you image responsive (there are other ways too, but this is simple).
VH is used for how much of the available height that should be used, like percent (%). 100VH is the whole screen from top to bottom, regardless of your screen size.
Now I put the image in the css-file (and used it ONLY as background, not background-image), but if you want to use it in your html-file, remember to set your with to 100%.
https://jsfiddle.net/battleaxe/u07cfbog/#&togetherjs=lbxrukCzHi
HTML:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100%;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
header {
height: 6vh;
width: 100%;
background-color: #2e4b49;
display: flex;
justify-content: center;
align-items: center;
}
ul {
width: 60%;
display: flex;
justify-content: space-between;
list-style: none;
color: #fff;
text-transform: uppercase;
}
.content {
height: 84vh;
width: 100%;
background: url("https://cdn.socloze.com/cdn/e_663aa122-718e-a8d3-301d-39f64b8523b0/ebdc5bef01506acc759b39f64b9cc917.jpg")
no-repeat center center;
background-size: contain;
/* You can use background-size: cover; if you want the image to cover your whole free space. */
}
footer {
height: 10vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #2e4b49;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<ul>
<li>This</li>
<li>Is</li>
<li>a</li>
<li>Header</li>
</ul>
</header>
<div class="content"></div>
<footer>
<p>This is a footer</p>
</footer>
</body>
</html>
Things you can look up are VH and VW, how the work and how they can be used. Also, try different background-sizes (cover, contain, and so on).
Good Luck!
I need to divide the screen to 2 halves vertically (adjacent to each other) and I need to display a text in middle (horizontally and vertically) of first half and need to display a list (which will be created dynamically using javascript) in the second half. I created a parent div and 2 child divs. But the content is not getting placed in the middle.
<!DOCTYPE html>
<html>
<head>
<title>VOD</title>
<script src='js/index.js'></script>
<style>
html, body
{
height:100%
}
#mid
{
position: fixed;
top: 50%; left: 50%;
z-index: 2;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255 ,0.5);
}
#mid1
{
float:left;
width:50%;
height:100vh;
overflow:hidden;
text-align: center;
}
#mid2
{
float:left;
width:50%;
height:100vh;
overflow:hidden;
text-align: center;
}
</style>
</head>
<body>
<div id='mid' style="display:none">
<div id="mid1">
<h2>text1</h2>
</div>
<div id="mid2">
<h2>text2</h2>
</div>
</div>
</body>
</html>
div 'mid' should be displayed only when user presses a button. So I put display as none and it will be enabled in javascript. And just for testing I put text in second div also. Can any one please help me to fix this problem?
You can use flexbox to accomplish this:
#mid {
display: flex;
height: 100vmin;
justify-content: stretch;
flex-flow: row nowrap;
background: blueviolet;
}
#mid-one, #mid-two {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#mid-one {
background: red;
}
#mid-two {
background: blue;
}
Working pen: https://codepen.io/manAbl/pen/WJqRKR?editors=0100 ;
Hope helps :)
Here is my code to stick the footer to bottom of the page:
#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}
When I'm doing it with height it works perfectly fine, but when I'm trying to set the minimum height it leaves a little space under the footer. Any guess how to fix that?
First of all, the height of body, html and container (see element with class 'container') has to have height: 100%;
In this solution I have used flex box. It is supported by all modern browsers and IE11.
It's necessary to add the following properties to container:
display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/
To move footer to bottom, just add to flex item
margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */
html, body {
height: 100%;
}
.container {
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
.header {
height: 20%;
background-color: yellow;
}
.content {
background-color: white;
}
.footer {
min-height: 20%;
background-color: blue;
margin-top: auto;
}
<div class="container">
<div class="header">Header</div>
<div class="content">It's content</div>
<div class="footer">Footer in bottom</div>
</div>
What about using Flexbox? It is supported by IE>=10.
To use that, you have to split your page at least in two separated elements: The "upper"-one (.content) with the whole content of your page and the footer.
The "upper"-one gets the value flex: 1, which is a shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
This means, that the "upper"-element could grow to the maximum, while the footer reserves only it's actually required space.
Code snippet
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="content"></div>
<footer class="footer">
Hey footer!
</footer>
</body>
</html>
You used min height 35 px. I think your content's height inside of footer is more than 35px. So check the margin or padding of all footer elements.
It will be better, if you can make a jsfiddle demo.
[SOLVED]
I found this to be working for my example:
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
I have a web page using a column flexbox, with fixed size header and footer, and a content area which takes up the remaining space. This works fine.
The content area is a row flexbox, and I have 2 square divs side by side. I am making them square by using padding-bottom. This works fine, unless the window is >2x the content area height. Then my squares start bleeding into the footer, because padding is based on element width.
I would like the squares to never overlap the footer. I'm ok with there just being dead space to the right of the squares. I would like to stick with flexbox and avoid floats if possible. Only modern browsers need be supported.
Is this possible with only CSS? Or is this a job for JS.
Fiddle
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#box {
display: flex;
flex-flow: column;
height: 100%;
}
div {
border: 1px solid tomato;
box-sizing: border-box;
margin: 0;
padding: 2px;
}
#header {
flex: 0 0 5em;
}
#footer {
flex: 0 0 5em;
}
#content {
background: blue;
display: flex;
flex: 1 1 auto;
flex-flow: row wrap;
min-height: 30%;
}
#content > div {
background: tomato;
border-color: black;
flex: 1 0 auto;
max-height: 50%;
padding-bottom: 50%;
}
<div id="box">
<div id="header">
<p><b>header</b>
</p>
</div>
<div id="content">
<div id='am'></div>
<div id='pm'></div>
</div>
<div id="footer">
<p><b>footer</b>
</p>
</div>
</div>
TIA!
Simple soluton:
#box
{
display: flex;
flex-flow: column;
min-height: 100%; /* this*/
}
JSfiddle Demo
Note: This assumes you want the page to overflow...but I didn't see any reference to containing the page height to the viewport.