In this case, the dynamic banner appears in some cases only. I have to put the Box div (angular component) at the end of the screen view but due to less height of its container, I am unable to do so. I tried setting the height to 100% which results in appearing the Box out of the screen. Just need a sample code for this layout so I can put it in my design. I have tried setting Box to bottom: 0, position: absolute but no luck.
You can make the Box parent a flex container and position it's children at the flex-end.
.parent {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
See example below:
.parent {
width: 200px;
height: 150px;
background-color: blue;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.box {
background-color: red;
height: 50px;
width: 100%;
}
<div class="parent">
<div class="box"></div>
</div>
Try this:
*{
box-sizing: border-box;
}
body{
padding:10px;
}
.div-wrapper{
border:1px solid #000;
padding: 20px;
}
.banner{
min-height:100px;
line-height:100px;
background: crimson;
color:#fff;
text-align:center;
border:2px solid green;
margin-bottom:20px;
}
.content-wrapper{
border:2px solid green;
height:auto;
display:flex;
padding:20px;
gap:20px;
}
.left-box,
.right-box{
padding:20px;
border:2px solid dodgerblue;
width:50%;
}
.right-box{
min-height:300px;
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.right-box .box{
width:100%;
height:50px;
background: royalblue;
}
<div class="div-wrapper">
<div class="banner">
BANNER
</div>
<div class="content-wrapper">
<div class="left-box">
</div>
<div class="right-box">
<div class="box">
</div>
</div>
</div>
</div>
Related
How do I make this layout with CSS? The parent div is set to max-width 1500px and it is a display flex and a gap 18px with two children #text, #news... news is overlapping to touch the right edge of whatever screen the user has.
html{
border:1px solid red;
}
html:after{
content:"HTML";
color:gray;
}
.main{
display:flex;
flex-flow:row;
max-width:350px;
color:black;
}
.main .child-1 {
flex: 1 1 40%;
border:1px solid #000
}
.main .child-2 {
flex: 1 1 100vw;
border:1px solid #000;
}
.main ul p {
display:block;
width 250px; // Whatever
}
ul{
list-style:none;
display:flex;
}
<div class="main">
<p class="child-1">Some lorem Text</p>
<div class="child-2">
<ul>
<li><p>1</p></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p>4</p></li>
</ul>
</div>
</div>
you can use negative margin to achieve the goal.
div{
border: 1px solid;
min-height: 100px;
}
.parent{
display: flex;
max-width: 250px;
padding: 20px;
column-gap: 20px;
}
.text{
width: 25%;
}
.news{
width:75%;
margin-right: -20px;
}
<div class="parent">
<div class="text"></div>
<div class="news"></div>
</div>
I'm playing around with flex-direction:column to understand this property better. Here's a Codepen of my code and a snippet below :
.container {
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
max-width: 800px;
height: 500px;
border: 1px solid black;
}
div div
{
text-align:center;
padding:30px 30px;
width:20%;
flex:1;
}
.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }
<div class="container">
<div class="red">RED</div>
<div class="orange">ORANGE</div>
<div class="yellow">YELLOW</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
Notice the text in the colored boxes are not vertically aligned. What causes this, and is there a way to align them vertically without nesting flexboxes within flexboxes?
By removing flex:1; on that div div, you get what (I think) you want.
Setting flex:1 means every box would take 1/5 of the parent's height. And since you have this fixed height on the parent, boxes are taking an height that is bigger than what is normally made with their content and padding.
Or you you could remove that height: 500px; from the parent, and keep everything as it is, like so:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
max-width: 800px;
border: 1px solid black;
}
div div {
padding: 30px 30px;
width: 20%;
text-align: center;
flex:1;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container">
<div class="red">RED</div>
<div class="orange">ORANGE</div>
<div class="yellow">YELLOW</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
Actually the reason the boxes look like that is: padding
To center text and content both horizontally and vertically in flex logic, you can add justify-content and align-items to the boxes.
div div {
display: flex;
justify-content: center;
align-items: center;
}
For your question:
.container {
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
max-width: 800px;
height: 500px;
border: 1px solid black;
}
div div
{
width:20%;
flex:1;
display: flex;
justify-content: center;
align-items: center;
}
.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }
<div class="container">
<div class="red">RED</div>
<div class="orange">ORANGE</div>
<div class="yellow">YELLOW</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
Since you asked to not use flexbox a possible approach is to use display: grid along with place-content: center
.container {
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
max-width: 800px;
height: 500px;
border: 1px solid black;
}
div div
{
text-align:center;
padding: 30px;
width:20%;
flex: 1;
display: grid;
place-content: center;
}
.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }
<div class="container">
<div class="red">RED</div>
<div class="orange">ORANGE</div>
<div class="yellow">YELLOW</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
and, as specified from other users, the position of the text in your example depends on the padding-top you set, as you can see from a web inspector
Here you can find a bunch of ways to vertically center text: How do I vertically align text in a div?
And this answer to the previous question tells you how to do it without flex, nor position absolute, just using line-height:
https://stackoverflow.com/a/4915529/11569755
That's useful when you know the height of your child div's, like in your example.
So you could add:
line-height: 40px;
to your div's, that would make it.
The number 40 comes from the height of the parent div (500px). As it has 5 children with the same flex properties, each one is 100px high, minus 60px of vertical padding (30px top, 30px bottom), that makes 40px.
You could also remove the padding and set the line-height to 100px.
If in a real case you won't know the height of the element, you should use one of the other approaches.
I have a section element with 3 divs inside, I want to center horizontally 'div 2', but the problem is the adyacent divs are not the same size so "justify-content:center" doesn't works.
I know here (under the title "Center a flex item when adjacent items vary in size") is a solution, but it doesn't work for me.
Here is the revelant code:
HTML
<section>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
</section>
CSS
section{
display:flex;
position:relative;
}
#div1{
width:260px;
}
#div2{
position:absolute;
left:50%;
transform(translateX:-50%,0);
}
#div3{
margin-left:auto;
width:50px;
}
Here is also a codepen.
My goal is center 'div2' and move the rest of divs to the left and right edges respectively.
Any help would be appreciated.
<section>
<div id="div1">DIV 1</div>
<div id="div2_wrap">
<div id="div2">DIV 2</div>
</div>
<div id="div3">DIV 3</div>
</section>
section{
display: flex;
position:relative;
padding:5px;
height: 500px;
background:yellow;
}
div{
padding:5px;
background:coral;
}
#div1{
width:260px;
}
#div2_wrap{
position: absolute;
left:50%;
height: 100%;
align-items: center;
display: flex;
}
#div2 {
background-color: #000fff;
}
#div3{
margin-left:auto;
width:50px;
}
You can wrap your divs around another parent div and set them to have equal widths first. Then align your children divs inside it's parent. Like this:
HTML:
<section>
<div class="wrapper" id="div1">
<div class="innerDiv">DIV 1</div>
</div>
<div class="wrapper" id="div2">
<div class="innerDiv">DIV 2</div>
</div>
<div class="wrapper" id="div3">
<div class="innerDiv">DIV 3</div>
</div>
</section>
CSS:
section{
display:flex;
padding:5px;
background:yellow;
text-align:center;
}
.wrapper{
display:flex;
flex-grow:1;
flex-wrap:wrap;
}
.innerDiv{
padding:5px;
background:coral;
}
#div1{
justify-content:flex-start;
}
#div1 .innerDiv{
flex:1;
}
#div2{
justify-content:center;
}
#div3{
justify-content:flex-end;
}
#div3 .innerDiv{
width:50px;
}
Codepen here
Or you can go with the old school more browser compatible way, and also keeping your HTML code same.
section {
padding: 5px;
background: yellow;
text-align: center;
position: relative;
float: left;
box-sizing: border-box;
width: 100%;
}
div {
padding: 5px;
display: inline-block;
background: coral;
}
#div1 {
width: 260px;
float: left;
}
#div2 {
left: 50%;
margin-left: -0.5em;
position: absolute;
}
#div3 {
float: right;
width: 50px;
}
Codepen Here
I'm trying to obtain this three-columns layout:
div1 (green) with its content aligned to the left
div2 (blue) with its content aligned to the center
div3 (magenta) with content its aligned to the right
Inside each column, I've multiple block element ("sheeps" in my mockup). Each element must be vertical-aligned to the "absolute" middle, no matter it's size: as the red-dotted line displays (more or less...), I need all the contained elements to have their center on the same line.
I'm starting from scratch, but I cannot use any "fixed" dimensions.
Thanks for your help.
Edit: My non-working crap is here http://jsfiddle.net/gV99f/6/
I'm not sure, but I think this is what you need. You need use tables or display: table, display: table-cell.
JsFiddle DEMO
I think you need something like this FIDDLE.
Tried to make it, rest you can so same just by aligning
<div class="container">
<div class="left"><span>div 1</span><br/><img src="http://i49.tinypic.com/bgd4qr.jpg" border="0" alt="Image and video hosting by TinyPic"></a></div>
<div class="center">div 2</div>
<div class="right">div 3</div>
</div>
CSS
.container {
width:600px;
height:200px;
border:1px solid;
}
.left {
width:150px;
height:200px;
background:magenta;
float:left;
}
.left span{
width:100px;
float:left;
text-align:left;
margin-bottom:20px;
}
.left img{
width:100px;
height:100px;
float:left;
}
.center {
height:200px;
width:300px;
background:blue;
float:left;
text-align:center;
}
.right {
height:200px;
width:150px;
background:green;
float:right;
text-align:right;
}
You can use new property css3 flex like this :
HTML :
<div id="wrap">
<div class="green"></div>
<div class="blue"></div>
<div class="cyan"></div>
</div>
CSS :
#wrap{
height:50px;
display:flex;
align-items:initial;
}
#wrap div{
flex:1;
}
DEMO : http://jsfiddle.net/6cae7/1/
And if you want adjust size you can use flex-grow property like this :
CSS :
#wrap{
height:50px;
display:flex;
align-items:initial;
}
#wrap div{
flex-grow:1;
}
#wrap div:nth-child(2){
flex-grow:3;
}
DEMO : http://jsfiddle.net/6cae7/3/
Demo
html
<div class="wrapper">
<div class="main">
<img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="100" height="100" />
</div>
<div class="aside aside-1">
<img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="200" height="200" />
</div>
<div class="aside aside-2">
<img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="150" height="150" />
</div>
</div>
css
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.main {
background-color: deepskyblue;
padding: 100px 0;
}
.aside-1 {
background: gold;
text-align: left;
padding: 50px 0;
}
.aside-2 {
background: hotpink;
text-align: right;
padding: 75px 0;
}
#media all and (min-width: 600px) {
.aside {
flex: 1 auto;
}
}
#media all and (min-width: 800px) {
.main {
flex: 2 0px;
}
.aside-1 {
order: 1;
}
.main {
order: 2;
}
.aside-2 {
order: 3;
}
}
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>