I have an issue with a sticky footer made with flexbox. It works well on resolutions upto 1366*768 but on 1600*1300 pixels the footer gets pushed to the bottom of the visible screen despite there being very little content.
Here is the html structure that I am using.
body , html {
height: 100%;
}
#main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#content {
flex: 1;
}
<body>
<div class="ui secondary pointing menu">
<a class="active item"><img src="/assets/images/ti.jpg" class="image ui small"></a>
<div class="right menu"><a class="ui item">Logout</a></div>
</div>
<div id="main">
<div id="content" class="ui container">
<div id="pie-menu" style="position: relative;">
<div class="DVSL-resize-triggers">
<div class="DVSL-expand-trigger">
<div style="width: 1128px; height: 501px;"></div>
</div>
<div class="DVSL-contract-trigger"></div>
</div>
<!--ZoomCharts 1.11.7-->
<div>
<div class="DVSL-background-container" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;">
<div class="DVSL-background" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;">
<div class="DVSL-background-image DVSL-PC-background-image" style="bottom: 0px; top: 92px; left: 405px; width: 317px; height: 317px; background-image: url(http://86.47.106.22:8080/assets/images/DublinPortCo.jpg);"></div>
</div>
</div>
<canvas class="DVSL-canvas" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 1127px; height: 500px;" width="1127" height="500"></canvas>
<div class="DVSL-border" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></div>
<div class="DVSL-interaction" tabindex="0" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: default;">
<div class="DVSL-resizer" style="width: 1127px; left: 0px;"></div>
<div class="DVSL-info-left" style="position: absolute; display: none; left: 752px; top: 256px;"><b>Owl</b></div>
</div>
<div class="DVSL-menu-container DVSL-menu-workaround" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: default;"><span class="DVSL-empty"> </span></div>
</div>
</div>
</div>
<div class="ui inverted vertical footer segment">
<div class="ui container">
<div class="ui grid">
<div class="twelve wide column">Thermtec 2016. All Rights Reserved</div>
<div class="three wide column"><img src="/assets/images/logoenigma.png" class="image ui small"></div>
</div>
</div>
</div>
</div>
</body>
The site is visible at http://86.47.106.22:8080/
Your header (ui secondary pointing menu) is taking some space while the #main div is 100% of viewport so that becomes [header height] + [viewport height] = footer pushed down
You can try to make the header 10% of viewport and content 90% of viewport to ensure consistency
.ui.secondary.menu {
...
height: 10%;
box-sizing: border-box;
margin-bottom: 0;
}
#main {
display: flex;
flex-direction: column;
height: 90%;
}
Related
I have a root div with a max width and then a container and some children in absolute.
.root {
background-color: tomato;
max-width: 400px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
position: relative;
}
.item {
background-color: steelblue;
width: 100px;
height: 100px;
position: absolute;
}
<div class="root">
<div class="container ">
<div class="item" style="top: 0px; left: 0px"></div>
<div class="item" style="top: 0px; left: 110px"></div>
<div class="item" style="top: 0px; left: 220px"></div>
<div class="item" style="top: 110px; left: 0px"></div>
</div>
</div>
Why the tomato background isn't visible? Why that div has height = 0?
What I want to achieve is a the root div with a max-width and then some children in absolute position that do not overflow the parent div
You root doesn't have height. When you set your items position to absolute you removed element from the normal document flow, and no space is created for the element in the page layout
Change height for .root 100% to 100vh
.root {
background-color: tomato;
max-width: 400px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
position: relative;
}
.item {
background-color: steelblue;
width: 100px;
height: 100px;
position: absolute;
}
<div class="root">
<div class="container ">
<div class="item" style="top: 0px; left: 0px"></div>
<div class="item" style="top: 0px; left: 110px"></div>
<div class="item" style="top: 0px; left: 220px"></div>
<div class="item" style="top: 110px; left: 0px"></div>
</div>
</div>
.root {
background-color: tomato;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
}
.item {
background-color: steelblue;
width: 100px;
height: 100px;
position: absolute;
}
<div class="root">
<div class="container ">
<div class="item" style="top: 0px; left: 0px"></div>
<div class="item" style="top: 0px; left: 110px"></div>
<div class="item" style="top: 0px; left: 220px"></div>
<div class="item" style="top: 110px; left: 0px"></div>
</div>
</div>
I have 3 divs inside a section. The divs position is absolute because I want a really small gap between the 3 divs, but when I want to horizontal the divs nothing happens. What should I do?
#columnL {
width: 412px;
height: 705px;
position: absolute;
left: 0;
}
#columnM {
width: 412px;
height: 705px;
right: 0;
left: 0;
position: absolute;
}
#columnR {
width: 412px;
height: 705px;
position: absolute;
right: 0;
}
<section id="blabla">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</section>
Make a parent div with a relative positioning rule. Like this:
#blabla {
position: relative;
}
Indicate the margin: auto for each card - #columnL, #columnM and #columnR.
And push the width: 100% for the img tag. Like this:
img {
width: 100%;
}
But why do you need absolute positioning?
#blabla {
position: relative;
}
#columnL {
width: 412px;
height: 705px;
position: absolute;
left: 0;
margin: auto;
}
#columnM {
width: 412px;
height: 705px;
right: 0;
left: 0;
position: absolute;
margin: auto;
}
#columnR {
width: 412px;
height: 705px;
position: absolute;
right: 0;
margin: auto;
}
img {
width: 100%;
}
<section id="blabla">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</section>
Solution with flex and absolute positioning.
The absolute in this solution is an additional parent block, with a class of .absolute, as well as a flexible rule that sets the indentation by the gap rule.
#blabla {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
gap: 30px;
}
#columnL {
width: 412px;
height: 705px;
}
#columnM {
width: 412px;
height: 705px;
}
#columnR {
width: 412px;
height: 705px;
}
img {
width: 100%;
}
<section id="blabla">
<div class="absolute">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</div>
</section>
with a lot of trialnerror and grinding on stack, I (we) have managed to get two images to overlap in a very specific way:
This has been achieved like so:
.container {
width: 900px;
margin: auto;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container_2 {
position: relative;
padding-top: 41.3%;
}
.imageContainer {
width: 70%;
position: absolute;
top: 0;
}
.psuedoContainer {
position: relative;
padding-top: 59%;
}
.psuedoHolder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
height: 100%;
width: auto;
}
<div class="centered">
<div class="container">
<div class="component">
<div class="container_2">
<div class="imageContainer" style="left: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: left;">
<img src="./img/img_codemesomething.png" />
<a href="page_appDev.html"/>
</div>
</div>
</div>
<div class="imageContainer" style="right: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: right;">
<img src="./img/img_recordmesomething.png" />
<a href="http://google.de"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And as you can see, there are two links included into the main two pictures (HTML).
However, only one of the two is working (the google one isnt). This is probably because one images is sort of "above" the other one, and therefore the lower one can never be clicked. At least it cannot be clicked just like it is right now.
How would I go on about adding a link to both images, that, wherever the user clicks, except for in the white part between both images, the user gets directed to a different page?
Thank you :)
you can wrap the images with the a tag
.container {
width: 900px;
margin: auto;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container_2 {
position: relative;
padding-top: 41.3%;
}
.imageContainer {
width: 70%;
position: absolute;
top: 0;
}
.psuedoContainer {
position: relative;
padding-top: 59%;
}
.psuedoHolder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
height: 100%;
width: auto;
}
<div class="centered">
<div class="container">
<div class="component">
<div class="container_2">
<div class="imageContainer" style="left: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: left;">
<a href="https://stackoverflow.com/questions/55650192/html-add-link-to-overlapping-images-pic/55650729#55650729"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
</a>
</div>
</div>
</div>
<div class="imageContainer" style="right: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: right;">
<a href="https://stackoverflow.com/"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This question already has answers here:
What is a clearfix?
(10 answers)
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Advantages of using display:inline-block vs float:left in CSS
(5 answers)
Closed 4 years ago.
I am having a repeatable tile generator. So I am generating HTML with a for loop. I need each tile, when I hover on it, to fade out and another div will be placed instead in the same location. I tried with having for each repeatable tile a div with position: relative .. then I place a hidden div that I make it appear on hover, with position: absolute .. however children divs are placed in the same location for the first tile, they're not placed according to their parent.
Here's the code I have that mimics what am having:
.titleContainer:hover{
opacity: 0;
}
.headers{
opacity: 0;
}
.headers:hover{
opacity: 1;
}
<div data-reactroot="" class="">
<div class="tile" style="position: relative;">
<div class="titleContainer" style="position: relative; float: left; width: 25%; margin-right: 30px;">
<img src="https://cdn.pixabay.com/photo/2018/08/31/19/16/fan-3645379_960_720.jpg" style="width: 100%; height: 200px;">
<div class="" style="background-color: red; opacity: 0.8; position: absolute; top: 0px; width: 100%; height: 40px;">
<h3 style="color: white; text-align: center; line-height: 0.5;">Random Tile</h3>
</div>
</div>
<div class="headers" style="background-color: red; position: absolute; width: 25%; height: 200px;">Hello</div>
</div>
<div class="tile" style="position: relative;">
<div class="titleContainer" style="position: relative; float: left; width: 25%; margin-right: 30px;">
<img src="https://cdn.pixabay.com/photo/2014/05/02/21/47/workstation-336369_960_720.jpg" style="width: 100%; height: 200px;">
<div class="" style="background-color: red; opacity: 0.8; position: absolute; top: 0px; width: 100%; height: 40px;">
<h3 style="color: white; text-align: center; line-height: 0.5;">Quick Links</h3>
</div>
</div>
<div class="headers" style="background-color: red; position: absolute; width: 25%; height: 200px;">Hello</div>
</div>
<div class="tile" style="position: relative;">
<div class="titleContainer" style="position: relative; float: left; width: 25%; margin-right: 30px;">
<img src="https://cdn.pixabay.com/photo/2015/01/14/18/41/home-office-599475_960_720.jpg" style="width: 100%; height: 200px;">
<div class="" style="background-color: red; opacity: 0.8; position: absolute; top: 0px; width: 100%; height: 40px;">
<h3 style="color: white; text-align: center; line-height: 0.5;">Global Links</h3>
</div>
</div>
<div class="headers" style="background-color: red; position: absolute; width: 25%; height: 200px;">Hello</div>
</div>
</div>
As you see, hovering on the first tile will only show ALL inner divs placed on top of each other, and the other tiles won't have the behavior when hovering.
Hi there I would need your help in vertical centering of those two elements in this footer, I would like them to be on same vertical level within footer. This is how it looks now:
footer example
This is my code:
<div style="position: fixed; width: 100%; height: 5%; left: 0; right:0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer>
<div style="float:left; margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="float:right; margin: 0 auto; margin-right: 5%;">Report</div>
</footer>
</div>
Updated: I have done what VPx suggest, my code now look like this:
<div style="position: fixed; width: 100%; height: 5%; left: 0; right: 0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer style="display: flex; justify-content: space-between; align-items: center; height: 100%;">
<div style="margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="margin-right: 5%;">Report</div>
</footer>
</div>
It's hovewer still not working as it should, it now looks like this:
second example of footer after suggested changes
Just do it with the Flexbox:
footer {
display: flex;
justify-content: space-between; /* max. horizontal space between them */
align-items: center; /* vertical alignment / centering */
height: 100%;
}
<div style="position: fixed; width: 100%; height: 20%; left: 0; right: 0; bottom: 0; background-color: #0065A0; color: #FFFFFF;">
<footer>
<div style="margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="margin-right: 5%;">Report</div>
</footer>
</div>
For better presentation I increased the height of the outer div to 20%.
Apply padding for inner elements of footer. Removeheight in footer.
<div style="position: fixed; width: 100%; left: 0; right:0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer>
<div style="float:left; margin-left: 5%; padding: 20px">© 2014-2017 Calgarry</div>
<div style="float:right; margin: 0 auto; margin-right: 5%; padding: 20px">Report</div>
</footer>
</div>
<div style="position: fixed;width:100%;left:0;right:0;background-color:#0065A0; color: #FFFFFF;top:0;">
<footer style="height: 50px;display:table;width:100%">
<div style="text-align:left;display:table-cell;vertical-align:middle; padding: 2%;">© 2014-2017 Calgarry</div>
<div style="text-align:right; display:table-cell;vertical-align:middle; padding: 2%;">Report</div>
</footer>
</div>
<div class = "row">
<div class = "col-sm-6 col-sm-offset-3">
<div>© 2014-2017 Calgarry</div>
</div>
<div class = "col-sm-3">
<div>Report</div>
</div>
</div>
Try this!
easiest way is to add a padding top to the footer.
<div style="position: fixed; width: 100%; height: 5%; left: 0; right:0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer style="padding-top: 0.5%;" >
<div style="float:left; margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="float:right; margin: 0 auto; margin-right: 5%;">Report</div>
</footer>
</div>