Code first:
html {
display:flex;
width:100%;
height:100%;
}
body {
display:flex;
flex:1;
}
.container {
display:flex;
flex:1;
overflow-y:auto;
flex-direction:column;
justify-content:center;
align-items:center;
}
.block1 {
justify-content:center;
background-color:green;
display:flex;
width:300px;
min-height:150px;
}
.block2 {
background-color:blue;
display:flex;
min-height:300px;
width:500px;
}
<div class="container">
<div class="block1">
<img src="https://tse2.mm.bing.net/th?id=OIP.M252f960f4a4f32c22914d8d87623f066o0&pid=15.1">
</div>
<div class="block2"></div>
</div>
I have two blocks in a container. I want them centered on the screen.
The issue is when the screen height is small, I have a scrollbar that appear but the first block have a part that go offscreen (is invisible)
To reproduce, decrease the height of the jsfiddle preview window. You will understand what I mean by going off screen.
The expected behavior is to let the scroll bar appear and keep the div visible.
I tried by setting flex-shrink to 0 on every element but it isn't working...
You can make use of Flexbox's auto margins.
Remove justify-content: center from .container.
Add margin-top: auto to .block1.
Add margin-bottom: auto to .block2.
html {
display:flex;
width:100%;
height:100%;
}
body {
display:flex;
flex:1;
}
.container {
display:flex;
flex:1;
overflow-y:auto;
flex-direction:column;
align-items:center;
}
.block1 {
justify-content:center;
background-color:green;
display:flex;
width:300px;
min-height:150px;
margin-top: auto;
}
.block2 {
background-color:blue;
display:flex;
min-height:300px;
width:500px;
margin-bottom: auto;
}
<div class="container">
<div class="block1">
<img src="https://tse2.mm.bing.net/th?id=OIP.M252f960f4a4f32c22914d8d87623f066o0&pid=15.1">
</div>
<div class="block2"></div>
</div>
You can add position: absolute; top: 0 to the container:
html {
display:flex;
width:100%;
height:100%;
}
body {
display:flex;
flex:1;
}
.container {
display:flex;
flex:1;
overflow-y:auto;
flex-direction:column;
justify-content:center;
align-items:center;
position: absolute;
top: 0;
}
.block1 {
justify-content:center;
background-color:green;
display:flex;
width:300px;
min-height:150px;
}
.block2 {
background-color:blue;
display:flex;
min-height:300px;
width:500px;
}
<div class="container">
<div class="block1">
<img src="https://tse2.mm.bing.net/th?id=OIP.M252f960f4a4f32c22914d8d87623f066o0&pid=15.1">
</div>
<div class="block2"></div>
</div>
Related
With my current code, how do I make the purple div stick to the left side of the green div? I tried float:left which didn't work. I got close when adding position:absolute; and left:50%; to my purple div class but when the screen resized the div fell off screen. Is there a quick way to float the purple div to the left of the green one so it's not in the center?
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display:flex;
}
#logo {
left:0px;
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="logo"></div>
</div>
</div>
Try like this.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display:flex;
}
#logo {
left:0px;
width: 100%;
margin:auto;
margin-left: 0;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="logo"></div>
</div>
</div>
I need the yellow div to float beside the the purple square. Orange on top, pink on the bottom and yellow to the left of the square. It worked when I took off the flex-wrap:wrap; from the right div but then all three divs went to the left. Is there anyway to just have the yellow div float to the right of the purple square to take up the remainder of the green area while the other two stay in their current spots?
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-direction: column;
}
#right>* {
flex: 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
margin-left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
}
#rightsidebottom{
background-color:pink;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div id="logo"></div>
<div id="rightsideright"></div>
<div id="rightsidebottom"></div>
</div>
</div>
This should work as intended.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-direction: column;
}
#right>* {
flex: 1;
}
#logo {
width: 100%;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
flex: 1;
}
#rightsidebottom{
background-color:pink;
}
.wrapper {
display: flex;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div class="wrapper">
<div id="logo"></div>
<div id="rightsideright"></div>
</div>
<div id="rightsidebottom"></div>
</div>
</div>
Edit: To make this answer a bit more universal, here is how the principle works: if you want div A to grow up to a max size, and div B to fill the remaining space, you have to make sure that:
The container is display: flex
A has width: 100% and has a max-width
B has flex: 1
Take note that if A would have flex: 1 as well, its greedy 100% would be overruled by the more generous flexing rule. Therefore the most minimal working example is:
.container {
display: flex;
}
.up-to-max {
width: 100%;
max-width: 100px;
background: red;
}
.filler {
flex: 1;
background: green;
}
<div class="container">
<div class="up-to-max">A</div>
<div class="filler">B</div>
</div>
(Watch in full page to resize the window)
You have to modify your html a bit and to adapt the css.
On a side note, you shouldn't use that much id, use classes.
Also, use flex-basis to give flex children a width.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-direction: column;
}
#right>*,
#right>* > *{
flex: 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
margin-left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
}
#rightsidebottom{
background-color:pink;
}
.wrapper {
display: flex;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div class="wrapper">
<div id="logo"></div>
<div id="rightsideright"></div>
</div>
<div id="rightsidebottom"></div>
</div>
</div>
I need to align 3 div's floated side by side. Below is my code however all the DIV's appear under each other, i'm guessing this is because of the fixed position. However this is the positioning I need for my website.
.one is sidelinks bar which I would like to have a min width: of 150px
.two is for adverts and instructions links
.three is a long div filled with data which needs to be scrollable. I tried to may methods but nothing works could jquery help? I want all to be of fixed position. I would also like the DIVs to remain the same size when the window is minimized.
Thanks
<!DOCTYPE html>
<html>
<head>
<style>
.one {
height:50px;
width:34%;
float:left;
background-color:red;
position:fixed;
}
.two {
height:50px;
width:33%;
float:left;
background-color:blue;
position:fixed;
}
.three{
height:50px;
width:33%;
float:left;
background-color:green;
position:fixed;
overflow:scroll;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
FOLLOW ON EDIT:
I'm able to split the DIVS apart but then the window is minimised the .two div floats over the .one div. see image https://postimg.cc/kDQSJpDR
.one {
height:50px;
width:33%;
float:left;
background-color:red;
position:fixed;
min-width:200px;
}
.two {
height:50px;
width:33%;
margin-left: 34%;
float:left;
background-color:blue;
position:fixed;
}
.three{
height:50px;
width:33%;
margin-left: 68%;
float:left;
background-color:green;
position:fixed;
overflow:scroll;
}
Did you want something like this?
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.justify-start {
justify-content: flex-start;
}
.flex-grow {
flex: 1 0 0;
}
.p-fixed {
position: fixed;
}
.w-150px {
height: 100%;
min-width: 150px;
max-width: 150px;
}
.wh-100v {
height: 100vh;
width: 100vw;
}
.wh-100p {
width: 100%;
height: 100%;
}
.overflow-scroll {
overflow: scroll;
}
.pink {
background-color: pink;
}
.red {
background-color: red;;
}
.green {
background-color: green;
color: white;
}
.text-justify {
text-align: justify;
}
<div class="flex-container justify-start wh-100v p-fixed">
<div class="w-150px flex-grow pink"></div>
<div class="wh-100p flex-grow red"></div>
<div class="wh-100p flex-grow green overflow-scroll text-justify">
<img src="https://via.placeholder.com/1000x1000"/>
</div>
</div>
If so, flexbox and a container as what #elbrant suggested is all that you'll need. Also, here's a working example :)
A quick note: Since both our flex-items' flex-grow property is set to the same value, those two above-mentioned items will always equally occupy their parent regardless of its size.
please add "margin-left:34%" in .two css and "margin-left:68%" in .three css.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
height:50px;
width:34%;
float:left;
background-color:red;
position:fixed;
}
.two {
height:50px;
width:33%;
margin-left: 34%;
float:left;
background-color:blue;
position:fixed;
}
.three{
height:50px;
width:33%;
margin-left: 68%;
float:left;
background-color:green;
position:fixed;
overflow:scroll;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
I believe you are trying to do this:
<!DOCTYPE html>
<html>
<head>
<style>
.one, .two, .three {
top:0;
position:fixed;
height:50px;
}
.one {
left:0;
width:34%;
background-color:red;
}
.two {
left:34%;
width:33%;
background-color:blue;
}
.three{
left:67%;
width:33%;
background-color:green;
overflow:scroll;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
The best way to make sure that your columns are in a set position (regardless of screen size) is to wrap them in a container.
CSS changes
Each of these grid-areas contain a series of numbers which designate where their sides are by top/left/bottom/right telling us that the sides of column .one are located at the position 1/1/2/2. It will be easier to understand if you draw a rectangle on a piece of scrap paper and put two lines in it from top to bottom, a rough draft of your column placement. Count your lines based on each column. For the first column: the top of the rectangle is line 1, the bottom is line 2. The left is line 1, the right side is line 2. Represented by 1/1/2/2. That gives each of your columns a fixed position.
.one {
grid-area: one 1/1/2/2;
height:150px;
min-width:150px;
background-color:red;
}
.two {
grid-area: two 1/2/2/3;
height:150px;
min-width:150px;
background-color:blue;
}
.three{
grid-area: three 1/3/2/4;
height:150px;
min-width:150px;
background-color:green;
overflow:scroll;
}
.grid-container {
display: grid;
grid-template areas: 'one two three';
margin-left: auto;
margin-right: auto;
padding: 0;
max-width: 100%;
position: center;
border: solid 1px #000;
}
.grid-container > div {
margin: 5px;
padding 0;
}
HTML changes
<div class="grid-container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div><!-- end container div -->
I am able to make a horizontally scrolling div using the following:
CSS
.scroll {
width:100%;
height:100px;
overflow-x:auto;
white-space:nowrap;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}
HTML
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
However, once this is nested inside a div with display:table, the .scroll div no longer scrolls and instead stretches the .scroll div to show all of the boxes.
Pretty sure there's an easy fix for this, any ideas?
For reference: http://jsbin.com/makigome/29/edit?html,css,output
Try this CSS, hope it helps
.table {
display: block;
width:100%;
}
.table-cell {
display:block;
width:100%;
}
.scroll {
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}
Is not possible using table and table cell, you can do it using float like this:
.table {
float:left;
width:100%;
}
.table-cell {
float:left;
width:100%;
}
.scroll {
clear:both;
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}
For anyone interested, I fixed this by setting position:absolute to the .scroll div and wrapping it within another div with position:relative like so:
http://jsbin.com/makigome/39/edit?html,css,output
<div class="table">
<div class="table-cell">
<div class="scroll-wrapper">
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
</div>
.table {
display:table;
width:100%;
}
.table-cell {
display:table-cell;
width:100%;
}
.scroll-wrapper {
height:100px;
position:relative;
}
.scroll {
height:100%;
width:100%;
overflow-x:auto;
white-space:nowrap;
position:absolute;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}
here a parent div like this
.div parent{
width:100%;
height:100%;
text-align:center;
}
.div child{
width:10%;
height:10%;
}
In responsive web mobile devices the child div is not align vertically middle how can i align middle?? please help me..
Thanks.
Try adding :
.div parent{
vertical-align: middle;
width:100%;
height:100%;
text-align:center;
}
FIDDLE
This is an alternative take, using CSS tables
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<div>Child</div>
</div>
</div>
</div>
CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
width:100%;
height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
border:1px solid grey;
vertical-align:middle;
text-align:center;
}
.cell div {
background:red;
display:inline-block;
margin:0 auto;
}
You have written .div parent seems to be an invalid selector, If you are trying to select a div with class parent, it should be selected using div.parent (Same applicable to your child div also).
Try this;
Apply diplay:table-cell; to .parent div, So that it will get the ability to align its child vertically middle.
then apply vertical-align:middle to the same to make the child elements vertically middle
div.parent{
width:100%;
height:100%;
text-align:center;
display:table-cell;
vertical-align:middle;
}
I know this post is old but here is another approach with Flex (also available in CodePen - http://codepen.io/KErez/pen/kXzYAj):
HTML:
<div class='a'>
<div class='b'>
Inner
</div>
</div>
CSS (the colors are just for showing the boxes clearly):
.a {
display: flex;
justify-content: space-around;
align-items: center;
color: #ffffff;
background-color: #223344;
width: 100%;
height: 100%;
}
.b {
display: flex;
justify-content: space-around;
align-items: center;
width: 75px;
height: 100px;
background-color: #999999;
color: #00ff00;
}
Very simple solution that I have used many times.
.a {
width: 300px;
height: 300px;
background-color:#666;
}
.b {
margin:auto;
width: 75px;
height: 100px;
top: calc(50% - 50px);
text-align:middle;
position: relative;
background-color:#111;
}
<div class='a'>
<div class='b'>
</div>
</div>