Flexbox float div to right - html

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>

Related

float div to left of parent div not working

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>

Align 3 Divs side by side with position:Fixed

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 -->

Can't align vertically text inside a div which is aligned horizontally with others

I have 4 divs aligned horizontally in the same line. I'm trying to center vertically the second and third through 'vertical-align' attribute with no success.
#container {
width:100%;
height:45px;
background-color:yellow;
}
#left {
width:100px;
height:45px;
float:left;
background-color:red;
}
#center1 {
width:100px;
height:45px;
display:inline-block;
background-color:green;
vertical-align: center;
word-break: break-word;
}
#center2 {
width:100px;
height:45px;
display:inline-block;
background-color:orange;
word-break: break-word;
}
#right {
width:100px;
height:45px;
float:right;
background-color:blue;
}
<div id="container">
<div id="left"> </div>
<div id="center1">Center 1</div><div id="center2">Center 2 Center 3</div>
<div id="right"> </div>
</div>
View in Fiddle
I don't want to align second and third content with 'position: relative; top: Xpx' or 'line-height: 45px;' due to second and third can have until two lines so I need to stay correctly aligned with one line and two lines.
Just add display: inline-flex; and align-items: center; to #center1 and #center2.
Edit: Dont forget to float them left.
Example:
#container {
width:100%;
height:45px;
background-color:yellow;
}
#left {
width: 100px;
height:45px;
float:left;
background-color:red;
}
#center1 {
width: 100px;
height:45px;
background-color:green;
float: left;
display: inline-flex;
align-items: center;
}
#center2 {
width: 100px;
height:45px;
background-color:orange;
float: left;
display: inline-flex;
align-items: center;
}
#right {
width: 100px;
height:45px;
float:right;
background-color:blue;
}
<div id="container">
<div id="left"> </div>
<div id="center1">Center 1</div><div id="center2">a long line of text!</div>
<div id="right"> </div>
</div>
I would probably use flexbox, it will make it easier to have a bar like that and easier to center thing vertically.
Have a look.
body {
margin: 0;
}
.flex-bar {
display: flex;
width: 100%;
}
.box {
display: flex;
width: 95px;
height: 40px;
justify-content: center;
align-items: center;
padding: 2.5px;
}
.filler {
flex: 1;
}
.red {
background: red;
}
.green {
background: green;
}
.orange {
background: orange;
}
.yellow {
background: yellow;
}
.blue {
background: blue;
}
<div class="flex-bar">
<div class="red box"></div>
<div class="green box">Centered #1</div>
<div class="orange box">Centered text number 2</div>
<div class="box yellow filler"></div>
<div class="blue box"></div>
</div>
I hope this helps.
You need to use vertical-align:middle; on both, the second and third element like this:
#table{
display:table;
width:100%;
}
#container{
display:table-row;
}
#left{
display:table-cell;
height:100%;
width:100px;
line-height:45px;
background-color:red;
}
#center1{
width:100px;
line-height:45px;
text-align:center;
display:table-cell;
background-color:green;
word-break: break-word;
vertical-align:middle;
}
#center2{
width:100px;
line-height:45px;
text-align:center;
display:table-cell;
background-color:orange;
word-break: break-word;
}
#space{
background-color:yellow;
display:table-cell;
}
#right{
width:100px;
line-height:45px;
display:table-cell;
background-color:blue;
}
<div id="table">
<div id="container">
<div id="left"> </div>
<div id="center1">
Center 1
</div>
<div id="center2">
Center 2 <br>Center 3
</div>
<div id="space">
</div>
<div id="right" style=""> </div>
</div>
</div>
Updated to center the text vertically and not only the element
To position the text, use line-height (vertical position) which should be equal to the height of the element and text-align:center to center the text horizontally.

flexbox div goes off screen on small screen

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>

Placing 3 div's side by side (1 fixed, 2 with 100% of free space and 3 auto)

I have a layout where I have 3 columns.
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
How can I place these 3 blocks in one line without JS, calc and flexbox if I need:
logo should be fixed
user-name should have auto width
search-input should places on the left free space between logo and user-name blocks. It has to be fluid container.
Use flexbox:
#wrapper {
display: flex;
/* flex-direction: row; <-- by default */
}
#logo {
flex: 0 0 200px;
background-color: lightgreen;
}
#user-name {
flex: none;
background-color: lightblue;
}
#search-input {
flex: 1 0 auto;
background-color: lightgrey;
}
<div id="wrapper">
<div id="logo">logo</div>
<div id="search-input">input</div>
<div id="user-name">user name</div>
</div>
May be this is what you want. you can add content of user-name to see how it work.
.wraper{
width: 100%;
border: 1px solid red;
}
#logo{
float:left;
width:250px;
height: 50px;
border:1px solid #CCC;
display:block;
background-color:yellow;
}
#search-input{
margin-left:260px;
min-height:50px;
display:block;
background-color:red;
}
#user-name{
float:right;
display:block;
height:50px;
background-color:#FFF;
}
#search-input > .inner{
height:50px;
background-color:red;
margin-right:20px;
}
#user-name > .inner{
background-color:green;
min-width:150px;
height:50px;
margin-left:10px;
}
<div id="wrapper">
<div id="logo">Logo</div>
<div id="user-name">
<div class="inner">
user name
</div>
</div>
<div id="search-input">
<div class="inner">
search input
</div>
</div>
</div>
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
<style>
#logo{float:left;padding:2px}
#search-input{width:50%;float:left;padding:2px}
#user-name{width:auto;float:left;padding:2px}
</style>
#wrapper{
display:block;
}
#logo{
display:inline-block;
width:30%;
float:left;
}
#search-input{
width:50%;
display:inline-block;
float:left;
}
#user-name{
width:auto;
display:inline-block;
float:left;
}
This will keep them in one line.