How can I add items down to be able to scroll?
There is a hack using transform: scaleY(-1) to start adding elements from the bottom
transform: scaleY(-1) on the container to invert it vertically
transform: scaleY(-1) on the children of the container to rectify the inversion on the children.
Even the overflow for the container starts from the bottom!
See demo below:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
height: 100vh;
overflow-y: auto;
transform: scaleY(-1);
}
.wrapper > div {
height: 100px;
width: 50vh;
border: 1px solid;
margin: 10px auto;
transform: scaleY(-1);
/*align text inside*/
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Let me know your feedback on this. Thanks!
Is this what u mean?
<div style="overflow-y:scroll;, height: 5px;">
<span></span>
<span></span>
<span></span>
<!-- any number of elements you want-->
</div>
Related
I would like to build something similar to a TV schedule with a "live" line. The schedule would scroll vertically (more channels) and horizontally (timeline).
I can't seem to achieve this with an absolute positioning. The line doesn't reach the bottom of the container when scrolling vertically.
The height of the contents of the container is dynamic, so I cannot assign a fixed height either. Would like to achieve this with CSS only. Simple example of my failure below.
<style type="text/css">
.wrapper { height: 150px; width: 400px; overflow: scroll; position: relative; }
.line { width: 3px; background: blue; position: absolute; left: 200px; top: 0; bottom: 0; z-index: 200; }
.list > div { width: 600px; height: 50px; margin: 5px; background: red }
</style>
<div class="wrapper">
<div class="line"></div>
<div class="list">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
What I would do is place the .line inside of the .list, so it can use that elements height as the context for its own height.
Also, I laid this out using css grid, which will give you a lot of flexibility with this type of layout. It's basically what it was intended for.
.wrapper {
width: 100%;
border: 2px solid black;
}
.line {
position: absolute;
left: 200px;
top: -20px;
width: 3px;
height: calc(100% + 20px);
z-index: 200;
background: goldenrod;
}
.list {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 5px;
margin: 20px 0 0;
}
.show {
height: 50px;
background: royalblue;
}
<div class="wrapper">
<div class="list">
<div class="show">0</div>
<div class="show">1</div>
<div class="show">2</div>
<div class="show">3</div>
<div class="show">4</div>
<div class="show">5</div>
<div class="show">6</div>
<div class="show">7</div>
<div class="show">8</div>
<div class="show">9</div>
<div class="show">10</div>
<div class="show">11</div>
<div class="show">12</div>
<div class="show">13</div>
<div class="line"></div>
</div>
</div>
I tried to center child divs inside a parent div. Quantity of child div is dynamic and I make "float: left". But group of child divs can't center inside a parent div.
Parent div static width: 800px;
Child divs static width: 360px; height: 320px.
Here my code:
* {
box-sizing: border-box;
}
.parent {
width: 800px;
display: flex;
justify-content: center;
background-color: #f8f9fb;
}
.child {
width: 360px;
margin: 7px;
min-width: 360px;
height: 320px;
float: left;
background-color: #FFFF;
border: 1px solid;
}
<div class="parent">
<div class="content">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
Some way I references but not in my case:
- http://jsfiddle.net/h9H8w/12/
- https://dev.to/stel/a-little-trick-to-left-align-items-in-last-row-with-flexbox-230l
- https://codepen.io/anon/pen/JbpPKa
My results like that:
- https://imgur.com/TX9I4vq
- https://imgur.com/NiRaHgj
Thanks for reading and sorry my bad english.
========================================================
From the help of #kukkuz. I changed my code:
* {
box-sizing: border-box;
}
.parent {
max-width: 800px;
display: grid;
justify-content: center;
background-color: #f8f9fb;
grid-template-columns: repeat( auto-fit, 360px);
grid-gap: 7px;
}
.child {
width: 360px;
/*margin: 7px;*/
min-width: 360px;
height: 320px;
/* float: left;*/
background-color: #FFFF;
border: 1px solid;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Is this what u want,
Basically I removed the float:left and the content div
justify-content: center; will handle the centering of the boxes,
Uncomment flex-wrap:wrap; to wrap the children on to the next line
Know that, making a div display:flex, will make its children flex-items, which was not happening in your case
* {
box-sizing: border-box;
}
.parent {
width: 800px;
display: flex;
justify-content: center;
background-color: #f8f9fb;
/*flex-wrap:wrap;*/
}
.child {
width: 36px;
margin: 7px;
min-width: 36px;
height: 32px;
background-color: #FFFF;
border: 1px solid;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
I know vertical alignment is tricky and there are plenty of questions about it on stackoverflow... I have been trying to figure this out for a few hours, with no success, so decided to ask it (apologies if it is a duplicate)
I have created a login page for my website.
There are 2 main divs in the body, one for logo and one for login content. The login content, has 2 sections, one for email and password and one for social media login.
<body>
<div>
My Logo goes here
<div>
<div>
<section id="loginForm"></section>
<section id="SocialLoginForm"></section>
</div>
</body>
Is there a way to always vertically center the login div? I want the logo to stay on the top, but the login div be vertically centered. I know I can assign a height to the div and center it's content, but I don't know how to determine the height as the screen size will change...
this is how it looks like, as you see there is a big gap at the bottom.
You can try flex like this :
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
text-align:center;
}
.logo {
border: 1px solid red;
min-height: 30px;
}
.login {
flex: 1;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
align-content: center;
}
#loginForm,
#SocialLoginForm {
min-height: 45px;
border: 1px solid green;
flex: 0 0 100%;
}
<div class="container">
<div class="logo">
My Logo goes here
</div>
<div class="login">
<section id="loginForm">Login content</section>
<section id="SocialLoginForm"> social login content</section>
</div>
</div>
You have a few display options:
display:table (ie8 and above)
html,
body {
height: 100%;
width: 100%;
}
body {
display: table;
margin: 0;
}
body>div {
display: table-row;
}
body>div+div {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align:center;
}
<div>
My Logo goes here
</div>
<div>
<section id="loginForm">lg form</section>
<section id="SocialLoginForm">socl form</section>
</div>
display:flex;
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
div+div {
margin: auto;
}
<div>
My Logo goes here
</div>
<div>
<section id="loginForm">lg form</section>
<section id="SocialLoginForm">socl form</section>
</div>
display:grid;
body {
height: 100vh;
margin:0;
display: grid;
grid-template-rows: auto 1fr;
}
div+div {
margin: auto;
}
<div>
My Logo goes here
</div>
<div>
<section id="loginForm">lg form</section>
<section id="SocialLoginForm">socl form</section>
</div>
All display method require a container with an height set.
there can be also method with transform, absolute, inline-block but no need to use tricks nowdays ;)
body, html{
display:table;
height:100%;
width:100%;
}
.my-container{
display:table-cell;
vertical-align:middle;
}
.my-container .your-div{
width:150px;
height:150px;
border:1px solid #e3e3e3;
margin:0 auto;
}
<html>
<body>
<div class="my-container">
<div class="your-div">
<div>My Logo goes here<div>
<div>
<section id="loginForm">loginForm</section>
<section id="SocialLoginForm">SocialLoginForm</section>
</div>
</div>
</div>
</body>
</html>
If you dont mind using preprocessor such as Sass. I would recommend using a mixin like that:
#mixin center($axis: "both") {
position: absolute;
#if $axis == "y" {
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
top: 50%;
transform: translateY(-50%);
}
#if $axis == "x" {
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
left: 50%;
transform: translateX(-50%);
}
#if $axis == "both" {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
body {
position: relative;
.inner-div {
#include center(); //both horizontaly and vertically pass 'x' or 'y' to center veritcally or horizontal
}
}
I would like to align seven divs in another parent container, all should have the same height (as the parent container) and width, except the very first and the last one.
I tried something like that:
HTML
<div id="weatherBar">
<div class="arrow"></div>
<div class="table-wrapper">
<div>1</div>
</div>
<div class="table-wrapper">
<div>2</div>
</div>
<div class="table-wrapper">
<div>3</div>
</div>
<div class="table-wrapper">
<div>4</div>
</div>
<div class="table-wrapper">
<div>5</div>
</div>
<div class="arrow"></div>
</div>
CSS
div#weatherBar {
position: relative;
width: 60vw;
max-width: 60vw;
height: 10vh;
left: 50%;
transform: translateX(-50%);
background-color: rgb(255, 255, 255);
overflow: hidden;
margin-top: 10vh;
}
div#weatherBar div.table-wrapper {
min-height: 10vh;
max-height: 10vh;
min-width: 10vw;
max-width: 10vw;
border: solid 0.5px blue;
float: left;
overflow: hidden;
}
div#weatherBar div.arrow {
min-height: 10vh;
max-height: 10vh;
min-width: 5vw;
max-width: 5vw;
float: left;
overflow: hidden;
background-color: red;
}
But what happens is that the last div does not appear (I attached a picture) and I have no idea why. Could you help me out?
Thank you in advance! :-)
The border of elements are not included by default in the width of an element as box-sizing is content-box by default.
Change it to border-box so that borders are included in the width using:
* {
box-sizing: border-box;
}
See demo below:
* {
box-sizing: border-box;
}
div#weatherBar {
position: relative;
width: 60vw;
max-width: 60vw;
height: 10vh;
left: 50%;
transform: translateX(-50%);
background-color: rgb(255, 255, 255);
overflow: hidden;
margin-top: 10vh;
}
div#weatherBar div.table-wrapper {
min-height: 10vh;
max-height: 10vh;
min-width: 10vw;
max-width: 10vw;
border: solid 0.5px blue;
float: left;
overflow: hidden;
}
div#weatherBar div.arrow {
min-height: 10vh;
max-height: 10vh;
min-width: 5vw;
max-width: 5vw;
float: left;
overflow: hidden;
background-color: red;
}
<div id="weatherBar">
<div class="arrow"></div>
<div class="table-wrapper">
<div>1</div>
</div>
<div class="table-wrapper">
<div>2</div>
</div>
<div class="table-wrapper">
<div>3</div>
</div>
<div class="table-wrapper">
<div>4</div>
</div>
<div class="table-wrapper">
<div>5</div>
</div>
<div class="arrow"></div>
</div>
I would like to get this style in CSS3:
CSS3 layout
For now, I have the simplest thing, the middle square with the following code:
HTML (pretty irrelevant, but I guess the tag does not need to be a div tag):
<div id="divBorder">
</div>
CSS:
#divBorder{
border-style: solid;
border-width: 1px;
position: absolute;
width: 300px;
height: 300px;
z-index: 15;
top: 50%;
left: 50%;
margin: -110px 0 0 -160px;
}
So, I just have basically centered the middle square in the center of the screen and that's all, I can't find a way to do the other two half squares on both sides of the full one.
I hope you can help me, thank you so much in advance!
You can achieve the desired layout with the following markup, using flexbox.
body {
margin: 0;
}
main {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
flex: 1;
background-color: mediumspringgreen;
}
div {
flex: 4;
display: flex;
background-color: darkviolet;
}
section {
flex: 1;
}
section:nth-child(even) {
flex: 2;
background-color: darkorchid;
}
footer {
flex: 1;
background-color: deeppink;
}
<main>
<header></header>
<div>
<section></section>
<section></section>
<section></section>
</div>
<footer></footer>
</main>
.inner {
border:solid;
}
.outer {display: flex;
flex-direction:row;}
.side {width: 25%; height: 50px;}
.center {width: 50%; height: 50px}
<div class="outer">
<div class="side inner"></div>
<div class="center inner"></div>
<div class="side inner"></div>
</div>
You can use flexbox to do this. You can either set the width in procentage or you can look into sizing it with flexbox.