This question already has answers here:
Force flex item to span full row width
(2 answers)
Closed 2 years ago.
How do I make the top div of the full horizontal length of the main container, while keeping the next two div, .left and .right in flex to each other?
To look like this -
.main {
border: 1px solid red;
display: inline-flex;
}
.main div.top {
border: 1px solid orange;
width: auto;
display: inline-block;
}
.main div.left {
border: 1px solid blue;
}
.main div.right {
border: 1px solid green;
}
<html>
<body>
<div class="main">
<div class="top">
<h1>top</h1>
</div>
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<h1>right</h1>
</div>
</div>
</body>
</html>
Another way to do this is with grid:
.main {
display: grid;
grid-template-columns: 1fr 1fr;
}
.main .top {
grid-column: 1/3;
}
.main {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 4px;
padding: 4px;
}
.main .top {
border: 1px solid orange;
grid-column: 1/3;
}
.main .left {
border: 1px solid blue;
}
.main .right {
border: 1px solid green;
}
<div class="main">
<div class="top">
<h1>top</h1>
</div>
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<h1>right</h1>
</div>
</div>
Use display: flex; and flex-wrap: wrap on the parent container, 100% width on the first child and flex-grow: 1 on the other children, or also use percentage widths on the second and third DIVs.
* {
box-sizing: border-box;
}
.main {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
}
.main div.top {
border: 1px solid orange;
width:100%;
}
.main div.left {
border: 1px solid blue;
width: 40%;
}
.main div.right {
border: 1px solid green;
width: 60%;
}
<html>
<body>
<div class="main">
<div class="top"> <h1>top</h1>
</div>
<div class="left"> <h1>left</h1>
</div>
<div class="right"> <h1>right</h1>
</div>
</div>
</body>
</html>
Any width of .left and .right
.main {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
}
.main div.top {
border: 1px solid orange;
width: auto;
display: inline-block;
flex: 1 1 100%;
}
.main div.left {
border: 1px solid blue;
flex: 1 1 auto;
}
.main div.right {
border: 1px solid green;
flex: 1 1 auto;
}
<div class="main">
<div class="top">
<h1>top</h1>
</div>
<div class="left">
<h1>left 11111111</h1>
</div>
<div class="right">
<h1>right</h1>
</div>
</div>
You can try something like this:
I just added 2 extra divs if that is not an issue?
#MainDiv {
width: 200px;
border: 1px solid red;
}
.main {
width: auto;
display: flex;
flex-direction: column;
}
#lower {
display: flex;
flex-direction: row;
}
.left,
.right {
width: 100px;
border: 1px solid black;
}
<html>
<body>
<div id="MainDiv">
<div class="main">
<div class="top">
<h1>top</h1>
</div>
<div id="lower">
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<h1>right</h1>
</div>
</div>
</div>
</div>
</body>
</html>
You can two div to create additional sections.
.main {
border: 1px solid red;
display: flex;
flex-direction:column;
}
.main div.top {
border: 1px solid orange;
width:auto;
}
.main div.left {
border: 1px solid blue;
flex:1
}
.main div.right {
border: 1px solid green;
flex:1
}
.main__section2 {
display:flex
}
<html>
<body>
<div class="main">
<div class="main__section1">
<div class="top">
<h1>top</h1>
</div>
</div>
<div class="main__section2">
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<h1>right</h1>
</div>
</div>
</div>
</body>
</html>
Related
I need to know how to build this layout with flex.
My vue component:
<template functional>
<div class="dashboard-wrapper">
<div id="your-parking">Parking</div>
<div id="options">
<div id="parking-menu">Options</div>
<div id="parking-contact"> Call to ...</div>
<div id="payment">Payment</div>
</div>
<div id="noticeboard">Noticeboard</div>
</div>
</template>
<style lang="scss" scoped>
.dashboard-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-height: 100%;
}
#your-parking{
background-color: cornflowerblue;
order: 1;
width:50%;
min-height: 50%;
}
#options {
order: 2;
min-width:50%;
}
#parking-menu{
max-height: 10vh;
}
#parking-contact{
min-width:50%;
}
#payment{
order: 4;
min-width:50%;
height: 60vh;
background-color: red;
}
#noticeboard{
order: 5;
width:50%;
background-color: goldenrod;
min-height: 50%;
}
</style>
My current result:
Colors and (min|max) height I added for test.
On the phone I want to have list with divs: parking, options, contact, payment, noticeboard.
You could change the structure of your html template and apply CSS like below:
.dashboard-container {
height: 15vh;
border-bottom: 1px solid gray;
}
.content-container {
display: flex;
height: 85vh;
box-sizing: border-box;
}
.left-content, .right-content {
width: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.parking, .noticeboard {
box-sizing: border-box;
flex: 1;
width: 100%;
border: 1px solid black;
}
.options, .contact {
flex: 1;
border: 1px solid black;
}
.payment {
flex: 4;
width: 90%;
margin: auto;
border: 1px solid black;
}
.parking, .noticeboard, .options, .contact, .payment {
margin-bottom: 5vh;
}
<div class="container">
<div class="dashboard-container">
<p>
DASHBOARD
</p>
</div>
<div class="content-container">
<div class="left-content">
<div class="parking">
<p>
PARKING
</p>
</div>
<div class="noticeboard">
<p>
NOTICEBOARD
</p>
</div>
</div>
<div class="right-content">
<div class="options">
<p>
OPTIONS
</p>
</div>
<div class="contact">
<p>
CONTACT
</p>
</div>
<div class="payment">
<p>
PAYMENT
</p>
</div>
</div>
</div>
</div>
You can check the JSFiddle here.
#dashboard{
width:80%;
margin:0 auto;
border:solid 1px grey;
height:10vh;
}
#container{
display:flex;
width:80%;
height:90vh;
border:solid 1px grey;
margin:0 auto;
}
#left,#right{
display:flex;
width:50%;
height:90vh;
border:solid 1px red;
flex-direction:column;
justify-content:flex-start;
align-items:center;
}
#parking,#noteboard{
width:100%;
height:35vh;
border:solid 1px green;
margin-bottom:2vh;
}
#options,#contact{
width:100%;
height:10vh;
border:solid 1px blue;
margin-bottom:2vh;
}
#payment{
width:80%;
height:46vh;
border:solid 1px pink;
}
<div id='dashboard'>Dashboard</div>
<div id='container'>
<div id='left'>
<div id='parking'>parking
</div>
<div id='noteboard'>noteboard
</div>
</div>
<div id='right'>
<div id='options'>options
</div>
<div id='contact'>contact
</div>
<div id='payment'>payment
</div>
</div>
</div>
I know that this question has already been asked several times but none of them seem to work for me or they're "too complicated" for my example.
I have three divs. Two of them are aligned vertically. The other one should be next to them and should have the same hight as the other two together.
It should look like this:
This is what I have so far:
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Have a look at my fiddle
It's better to wrap your right side div(.info) with a parent div.
Try this one , it could help
.wrapper{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid red;
background-color: #fffdea;
width: 100%;
padding: 10px;
}
.icon {
border: 1px solid lightgreen;
width: 30%;
}
.right-set {
width: 75%;
}
.info {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
border: 1px solid aqua;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="right-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
try this
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
.wrapper {
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon {
border: 1px solid lightgreen;
width: 130px;
margin: 5px;
}
.info-set {
width: 100%;
}
.info {
border: 1px solid aqua;
display: flex;
justify-content: space-between;
margin: 5px 5px 5px 0;
}
Something needs to have a height set, either the wrapper or the icon. I also set height 50% of the info divs and changed box-sizing to border box for the contained elements.
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
height: 130px;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
box-sizing: border-box;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
height: 50%;
box-sizing: border-box;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Can be achieved using Flexbox and wrapping the info divs in a container.
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-container">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
CSS :
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon{
border: 1px solid lightgreen;
width: 30%;
min-height: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.2);
}
.info-container{
display: flex;
width: 70%;
box-sizing: border-box;
flex-direction: column;
}
.info{
border: 1px solid aqua;
}
You could also attempt to use css Grid.
.wrapper {
display: grid;
/*1fr unit is one fraction of the remaining space available. So I have divided the space into two tracks. One longer than the other*/
grid-template-columns: 1fr 5fr;
}
.icon {
background: #a03;
/*Run the icon div in two rows height but take one track width as the rest*/
grid-row: span 2;
}
.info {
background: #bccd03;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
How to make the button text top left in the below case (div2).
I have to use button for some requirement, but make it look like a normal text. Any help you help.
Container is flexbox column and have a button with flex 1.
I don't want add an element inside button and make it position absolute.
Need cleaner way.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
Top left Alignment
Use the property flex-direction: column; to align your text top left.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
flex-direction:column;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
Center Alignment
Just change your style text-align:left to text-align:center.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: center;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
You can do the combination and apply the properties as per your requirements.
This is not perfect and probably you will have to play around with this but i guess this is a step in the right direction.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
position:absolute;
flex-direction: column;
}
So, I added padding-bottom to the .div2 classed element, so the text inside div2 is pushed up and away from the bottom edge of the element.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
padding-bottom: 40%;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
I want to give remaining width to .inner div. At the Same time it's siblings (a & span tags) can be of dynamic width.
Any idea?
Code below & at https://jsfiddle.net/pge8rqw0/
.top {} .inner {
border-bottom: 1px solid black;
background-color: green;
width: auto;
float: left;
width: 50px;
}
a {
float: left;
}
span {
float: right;
background-color: red;
}
<div class="top">
Visit W3Schools.com!
<div class="inner"></div>
<span>Html is good</span>
</div>
Thanks
Solution using display: flex.
.top {
display: flex;
}
.inner {
border-bottom: 1px solid yellow;
background-color: green;
min-width: 50px;
flex: 1;
}
a {
background-color: #f5f5f5;
}
span {
background-color: red;
}
<div class="top">
Visit W3Schools.com!
<div class="inner"></div>
<span>Html is good</span>
</div>
If you can change the order of elements in your code then you can achieve it without flex as follows:
.top {overflow: hidden;}
a {
float: left;
}
span {
float: right;
background-color: red;
}
.inner {
border-bottom: 1px solid black;
background-color: green;
overflow: hidden;
}
<div class="top">
Visit W3Schools.com!
<span>Html is good</span>
<div class="inner">Inner Content</div>
</div>
How can I make the 3 child divwith class .box have the same width while fluidly occupying the entire parent container div while staying inline.
Here is a fiddle
#container {
width: 20em;
background: red;
text-align: center;
}
.box {
display: inline-block;
margin: 1em;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
use CSS flexbox for that
#container {
width: 20em;
display: flex;
background: red;
text-align: center;
}
.box {
flex: 1;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
OR
use inline-block as you already are using, with a few tweaks.
* {
box-sizing: border-box
}
#container {
width: 20em;
background: red;
text-align:center
}
.box {
font-size: 16px;
display: inline-block;
width: calc(100% / 3);
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>
OR
use CSS tables for old browsers support
#container {
width: 20em;
display: table;
background: red;
text-align: center;
}
.box {
display:table-cell;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
display:table version:
#container {
width: 20em;
background: red;
text-align: center;
display: table;
table-layout: fixed;
border-spacing: 1em;
/* instead the margin:1em; you applied to children */
}
.box {
display: table-cell;
;
border: 1px solid #000;
}
.middle{vertical-align:middle;}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
<hr/>
<div id="container">
<div class="box">test
<br/>+ 1line ?</div>
<div class="box">test</div>
<div class="box middle">test</div>
</div>
table-layout:fixed will fix width value you set, for main container and children.
if children(table-cell) have no width set, they will spray evenly
#container {
width: 20em;
background: red;
text-align: center;
display: table;
table-layout: fixed;
border-spacing: 1em;
/* instead the margin:1em; you applied to children */
}
.box {
display: table-cell;
;
border: 1px solid #000;
}
.middle{vertical-align:middle;}
<div id="container">
<div class="box">test test test test </div>
<div class="box">test</div>
<div class="box">test</div>
</div>
<hr/>
<div id="container"class=" bis ">
<div class="box">testtesttesttest testtesttest</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
If you want to do this with display: inline-block you can set equal width of 33.33% on each .box, remove white space from HTML and also add box-sizing: border-box.
* {
box-sizing: border-box;
}
#container {
width: 20em;
background: red;
text-align: center;
}
.box {
display: inline-block;
width: 33.33%;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>