I have the following in my HTML file:
<div class="container-box">
<div class="profile-box">
<div class="image-container">
<div class="profile-picture"></div>
</div>
</div>
</div>
In my CSS file, I have the following:
.container-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.profile-box {
height: 350px;
width: 500px;
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
This results in my profile-box being center-aligned, but I also want it vertically aligned. I have tried changing the flex-direction to row, but that only stretches it to take over all the horizontal space.
Here is a codepen: https://codepen.io/Humad/pen/rKLMeo
It is already centered, but your body and .container-box do not have a height set for it go in the center.
JSFiddle demo
body, html {
height: 100%; /* added */
width: 100%; /* added */
margin: 0; /* added */
}
.container-box {
height: 100%; /* added */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: black;
}
Related
I am trying to create a scrollable file tree. Minimal code can be found below.
https://jsfiddle.net/3kLmchot/1/
Problem is when I try to add overflow-y: scroll;, to the filebrowse-outer div, the first few items are not visible at all. This problem gets worse when I add more divs.
It seems like items are added about the center of the filebrowse-outer div, so the items that are added at the bottom can be found via scrolling, but the items that are added at the top are invisible. (see the visual aid below)
item 1
item 2
center of the div
item 3
item 4
Scroll bar forms at around item 2, which makes item 1 invisible. Does anyone know why this is happening, and potential solutions?
I got it to work with the following styles, specifically removing justify-content: center; from your .flex-container that is being used by multiple divs and only applying it to the one that is for .flex-container.filebrowse-inner
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
}
.flex-container {
display: flex;
/* justify-content: center; <-- THIS LINE IS CAUSING THE ISSUE */
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: 1px solid #f00;
overflow-y: scroll;
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
justify-content: center;
width: 100%;
padding-bottom: 15px;
text-align: left;
position: relative;
}
/* .display-container {
width: 70%;
overflow: auto;
} */
I think that you meant to have scroll bar in the external div with class 'side-bar', if yes:
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
overflow-y:scroll;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: solid;
min-height: max-content; /* For safari*/
/* overflow-y: scroll; */
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
width: 100%;
min-height: max-content; /* For safari*/
padding-bottom: 15px;
text-align: left;
position: relative;
}
.display-container {
width: 70%;
overflow: auto;
}
<div class="side-bar">
<div class="flex-container filebrowse-outer">
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 1!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 2!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 3!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 4!</p>
</div>
</div>
</div>
</div>
You can then move the border to 'side-bar' class.
I created a layout using css and Flexbox, the issue is the footer div displays at the bottom of the page on load, but content shoots past it, so when you scroll the footer is just floating in the middle of the page. I'm not sure what to change.
I have changed the footer to be sticky, and bottom to be 0px. It kinda worked with adjusting the margin of the other divs, but its not very clean. I was hoping to keep using the flexbox attributes and just have them stack, but that doesn't seem to work? I've also adjusted the min-max heights of the other divs, but as soon as the window shrinks past the min height the footer just floats over the rest of the content.
Link to code JSFiddle
.footer{
height:40px;
display:flex;
align-items:center;
justify-content:center;
width:100%;
background-color:purple;
}
I would suspect that the footer would obey the stacking order and just display under the rest of the content, like the main body does under the header.
It's the height set on your '.content' class. Change height: calc(100vh - 100px) to min-height: calc(100vh - 100px)
Unless you want the footer and header always visible, then you can just add overflow: auto to make the content scroll
Remove height: calc(100vh - 100px); from .content class
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.bodywrap {
display: flex;
flex-wrap: wrap;
align-content: space-between;
background-color: black;
}
.header {
display: flex;
justify-content: space-between;
width: 100%;
height: 60px;
background-color: brown;
}
.hleft {
display: flex;
align-items: center;
justify-content: center;
width: 250px;
background-color: lightgreen;
}
.hmid {
display: flex;
align-items: center;
justify-content: center;
flex-grow:1;
font-size: calc(1.5vw);
background-color: orange;
}
.hright {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
background-color: pink;
}
.content {
display: flex;
justify-content: space-between;
background-color: darkblue;
}
.lmenu {
display: flex;
width: 250px;
flex-wrap: wrap;
align-content: space-between;
height: 100%;
min-height: 600px;
background-color: lightgrey;
overflow: hidden;
}
.ltop {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width: 100%;
background-color: blue;
}
.lmid {
height: 50px;
width: 100%;
background-color: green;
}
.lbot {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
background-color: yellow;
}
.rmaincont {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: calc(100vw - 250px);
background-color: grey;
}
.note {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
height: 50px;
}
.main {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: calc(100vh - 50px);
min-height: 550px;
width: 100%;
padding-left: 20px;
background-color: red;
}
.footer {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: purple;
}
<!DOCTYPE html>
<html>
<head>
<title>Mid-Valley Intranet</title>
<link rel="stylesheet" type="text/css" href="css/cstyle.css">
</head>
<body>
<div class="bodywrap">
<header class="header">
<div class="hleft">Left</div>
<div class="hmid">Mid</div>
<div class="hright">Right</div>
</header>
<div class="content">
<div class="lmenu">
<div class="ltop">
Top
</div>
<div class="lmid">
Mid
</div>
<div class="lbot">
Bot
</div>
</div>
<div class="rmaincont">
<div class="note">
Notice
</div>
<div class="main">
Main Content
</div>
</div>
</div>
<footer class="footer">
Footer Text
</footer>
</div>
</body>
</html>
There are a few things did to do to make this work:
Originally the scrolling was happening on the body. I added overflow: hidden on the body and overflow-y: auto to the div with the "bodywrap" class.
I added the position sticky and bottom 0, but with vendor prefixes:
bottom: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
I also made the div with class "bodywrap" have a height equal to 100vh minus the height of the footer (so that the scrolling content doesn't get cutoff at the bottom). You may want to set a sass variable or something for this 40px height.
height: calc(100vh - 40px);
Here's a demo of the new version:
jsfiddle.net/webwhizjim/6f84b7su/3/
I'm working on a page that has a header nav, then two rows of banner images, then a couple more divs below the banners.
What I'd like to achieve is to have the nav div be a set height (90px) and then have the two rows of banners evenly split the remaining viewport height of the user's browser. Then, have the two divs below the banners also be fixed pixel heights.
Here's a snippet of my stripped down code:
html, body {
margin: 0;
padding: 0;
}
.nav {
background: red;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.banners-row-1 {
background: green;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.banners-row-2 {
background: orange;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.mailing-list {
height: 115px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
height: 117px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
<div class="nav">
This is the nav
</div>
<div class="banners-row-1">
Banners Row 1
</div>
<div class="banners-row-2">
Banners Row 2
</div>
<div class="mailing-list">
Mailing List
</div>
<div class="footer">
Footer
</div>
As you can see, the two banner rows are set to 50vh, which is close to what I want - but, is there a way to somehow incorporate the 90px nav div when the banner divs calculate the viewport height?
Essentially, what I'm after is something along the lines of 50% of 'viewport height minus 90px'...?
Thanks
Wrap your nav and banners to wrapper and use following flex properties:
html, body {
margin: 0;
padding: 0;
}
.nav {
background: red;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
display: flex;
flex-direction: column;
height: 100vh;
}
.ban {
flex: 1;
}
.banners-row-1 {
background: green;
display: flex;
justify-content: center;
align-items: center;
}
.banners-row-2 {
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
.mailing-list {
height: 115px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
height: 117px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrap">
<div class="nav">
This is the nav
</div>
<div class=" ban banners-row-1">
Banners Row 1
</div>
<div class="ban banners-row-2">
Banners Row 2
</div>
</div>
<div class="mailing-list">
Mailing List
</div>
<div class="footer">
Footer
</div>
It works, because space in .wrap is splitted like:
.nav has fixed 90px
.bans have equal left space (100vh - 90px) / 2
This question already has answers here:
White space under image [duplicate]
(5 answers)
Remove white space from image
(3 answers)
Closed 5 years ago.
So I have two divs in a full width container that I want to give variable sizing with flexbox, but no matter what I do, there is an annoying offset at the bottom. Using margins I can come close to fixing the problem, but it's never perfect.
If you run the code snippet below and scroll to the bottom you can see it, the image and the black content container are not aligned at the bottom.
What's going on?
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
margin-bottom:7px;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</container>
There is some space below the image since the image is an inline-element and as such there is some space reserved below the (invisble) baseline that the image is aligned to vertically. To avoid that, there are two possible solutions:
1.) Apply display: block; to the image (see first snippet)
or
2.) Apply font-size: 0 to the image container (see second snippet)
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
img {
display: block;
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</div>
SECOND SOLUTION:
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
font-size: 0;
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</div>
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
margin-bottom:4px;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</container>
Looks like the margin is just a bit off
I got a situation where flex box is not working the way I want it to within Chrome but it works in other browsers (apart from iOS mobile devices).
I am struggling to vertically align any content within Chrome but works in everything else. Any ideas?
Also, does anyone know a way I can dynamically stretch a div to a certain % of the div class content which will also work within chrome?
Thanks in advance. See the bottom for demo and screenshots.
HTML
<div class="container">
<div class="content">
<h2>Ticket System <span style="color:#339933; font-weight:bold;">Open</span> Customer Ticket List</h2>
<a class="BlueButton" href="ticket_view_cust_ticket.php">Open Customer Tickets</a>
<a class="BlueButton" href="ticket_view_cust_ticket_rejected.php">Rejected Customer Tickets</a>
<div class="centerContent">
There are currently no open customer tickets
</div>
</div>
</div>
CSS
html,body
{
height: 100vh;
}
body
{
display: table;
margin: 0 auto;
font-family: Tahoma,Arial,Sans-Serif;
}
.container
{
height: 98vh;
vertical-align: middle;
width: 70vw;
min-width:1024px;
margin-left:auto;
margin-right:auto;
margin-top: 1vh;
display: flex;
flex-direction: column;
}
.content
{
background-color: #ff0000;
flex: auto;
webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-shrink: 0;
-o-flex-shrink: 0;
flex-shrink: 0;
text-align: center;
font-size: 12px;
padding-top:20px;
min-height:600px;
}
.centerContent
{
height: 95%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
Demo - https://jsfiddle.net/qr2tpgo6/1/
Container Screenshot - http://prntscr.com/azp8bk
Firefox - http://prntscr.com/azp4oj
Chrome - http://prntscr.com/azp4hy
Your container is missing display: flex, so flex properties aren't working.
Add this:
.content
{
background-color: #ff0000;
flex: auto;
flex-direction: column;
flex-shrink: 0;
text-align: center;
font-size: 12px;
padding-top:20px;
min-height:600px;
display: flex; /* new; establish flex container */
justify-content: center; /* new; center children vertically */
}
Revised Fiddle