I'm trying to create two centered div, which are seperated by a border like this.
Didn't know how to insert the border between the two div.
the two div are clickable.
.homescreen-content {
display: flex;
flex-direction: column;
max-height: 100% !important;
}
.goto {
margin-top:20%;
left:0;
height: 100% ;
width: 100% !important;
background-color: green;
text-align: center;
}
.no {
left:0;
height: 100%;
width: 100% !important;
background-color: red;
text-align: center;
}
<div class="homescreen-content" scroll="false">
<div (click)="open()" class="goto">
<h2>TITLE 1 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
<hr class="border">
<div (click)="open()" class="no">
<h2>TITLE 2 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
</div>
As mentioned by Fabio, you could replace your <hr> tag with a <div> and set the height of the <div> to be the thickness of the border you want.
.homescreen-content {
display: flex;
flex-direction: column;
max-height: 100% !important;
}
.goto {
margin-top:20%;
left:0;
height: 100% ;
width: 100% !important;
background-color: green;
text-align: center;
}
.no {
left:0;
height: 100%;
width: 100% !important;
background-color: red;
text-align: center;
}
.border {
width:100%;
height:10px;
background:blue;
}
<div class="homescreen-content" scroll="false">
<div (click)="open()" class="goto">
<h2>TITLE 1 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
<div class="border"></div>
<div (click)="open()" class="no">
<h2>TITLE 2 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
</div>
You can add border using CSS, look my CSS carefully !
.homescreen-content {
display: flex;
flex-direction: column;
max-height: 100% !important;
}
.goto {
margin-top:20%;
left:0;
height: 100% ;
width: 100% !important;
background-color: green;
text-align: center;
border-bottom : 15px solid white ;
}
.no {
left:0;
height: 100%;
width: 100% !important;
background-color: red;
text-align: center;
border-top : 15px solid white ;
}
<div class="homescreen-content" scroll="false">
<div (click)="open()" class="goto">
<h2>TITLE 1 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
<div (click)="open()" class="no">
<h2>TITLE 2 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
</div>
You can change border color,
Border : 15px solid red ;
You can also change border type,
Border : 15px dotted blue ;
Related
I would like the lines at the bottom of each div/bottom border to align. When text on one side is longer than the other, the bottom border looks disjointed.
.one {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 5%;
}
.inner {
padding: 5px;
width: 100%;
}
.two {
padding: 5px;
}
.innerTxt {
width: 90%;
border-bottom: 2px solid blue;
}
<div class="one">
<div class="inner">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Wings</h4>
<p>Lorem Ipsum. This text is shorter</p>
</div>
</div>
<div class="two">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Other</h4>
<p>Some other text on this page that happens to be longer than the previous</p>
</div>
</div>
</div>
A height style can be applied to the <p> element if the content inside the <p> element is not dynamic.
.one {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 5%;
}
.inner {
padding: 5px;
width: 100%;
}
.two {
padding: 5px;
}
.innerTxt {
width: 90%;
border-bottom: 2px solid blue;
}
p {
height: 50px;
}
<div class = "one">
<div class="inner">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Wings</h4>
<p>Lorem Ipsum. This text is shorter</p>
</div>
</div>
<div class="two">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Other</h4>
<p>Some other text on this page that happens to be longer than the previous</p>
</div>
</div>
</div>
You could use an absolutely-positioned pseudo element to draw the border while maintaining the 90% width of innerTxt.
Because the flex elements are stretched vertically they'll be aligned at the bottom.
.one {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 5%;
}
.inner {
padding: 5px;
width: 100%;
}
.two {
padding: 5px;
}
.innerTxt {
width: 90%;
}
.one>* {
position: relative;
}
.one>*::after {
content: '';
position: absolute;
bottom: 0;
border-bottom: 2px solid blue;
display: block;
width: 90%;
}
<div class="one">
<div class="inner">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Wings</h4>
<p>Lorem Ipsum. This text is shorter</p>
</div>
</div>
<div class="two">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Other</h4>
<p>Some other text on this page that happens to be longer than the previous</p>
</div>
</div>
</div>
try adding to the .inner div align-self: flex-end;
.inner{
align-self: flex-end;
}
or to the parent div :
.one {
align-items: flex-end;
}
I have a flexbox layout with two columns. Column one contains an image, at design time the aspect ratio of the image is unknown. I want to display the whole image while maintaining its aspect ratio. Column two contains several lines of text, length is unknown at design time. The container should not have a fixed height.
How can I maximize the space available in column one for the image, without the image height exceeding the height of (the text in) column two?
In the code snippet below I want the height of the black image to be less than or of the same height as the right column with gray background, it should never be taller.
.row {
display: flex;
padding: 5px;
margin: 5px;
align-items: flex-start;
background-color: blue;
}
.col1 {
flex-grow: 1;
background-color: yellow;
align-self: stretch;
}
.col2 {
background-color: lightgray;
padding: 10px;
min-width: 300px;
}
img {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
}
<div class="container">
<div class="row">
<div class="col1">
<img src="https://dummyimage.com/256x256/000/fff">
</div>
<div class="col2">
<p>Here's some text</p>
<p>And some more text</p>
<p>And some more text</p>
</div>
</div>
</div>
You could have an average result via height:0; + min-height:100% , but parent's width will hardly be update .
.row {
display: flex;
padding: 5px;
margin: 5px;
background-color: blue;
justify-content:start;
}
.col1 {
flex: 1 1 auto;
background-color: yellow;
align-self: stretch;
}
.col2 {
background-color: lightgray;
padding: 10px;
flex:1 0 auto;
}
img {
height:0;
min-height: 100%;
min-width:100%;
object-fit: contain;
}
<div class="container">
<div class="row">
<div class="col1">
<img src="https://dummyimage.com/256x256/000/fff">
</div>
<div class="col2">
<p>Here's some text</p>
<p>And some more text</p>
<p>And some more text</p>
</div>
</div>
</div>
To achieve this kind of result you need to have one of the column's widths fixed.
In the below example I have fixed the width of the image to 256px.
.row {
display: flex;
padding: 5px;
margin: 5px;
align-items: flex-start;
background-color: blue;
}
.col1 {
flex: 0 0 256px;
background-color: yellow;
}
.col1 > img {
width: 256px;
}
.col2 {
flex: 1;
background-color: lightgray;
padding: 10px;
}
<div class="container">
<div class="row">
<div class="col1">
<img src="https://dummyimage.com/600x600/000/fff">
</div>
<div class="col2">
<p>Here's some text</p>
<p>And some more text</p>
<p>And some more text</p>
<p>And some more text</p>
<p>And some more text</p>
<p>And some more text</p>
</div>
</div>
</div>
I have some text that can overflow the parent container:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
text-align: center;
}
.header {
white-space: nowrap;
}
<div class="container">
<div class="header">
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
When text is short, it is center aligned, as expected.
However, when the text overflows the container, it's not center aligned anymore.
How could I align the text horizontally regardless of the length of the text?
Desired outcome:
html:
<div class="container">
<div class="header">
<div>Short Text</div>
</div>
<div class="header">
<div>Very long text that should not wrap and be center aligned</div>
</div>
</div>
</body>
</html>
css:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
display: flex;
flex-wrap: wrap;
}
.header {
white-space: nowrap;
position: relative;
left: 50%;
transform: translateX(-50%);
}
for demo here, https://jsfiddle.net/jinny/qs7wL4nv/33/
Use text-indent:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
text-align: center;
}
.header {
white-space: nowrap;
text-indent: -8em;
}
<div class="container">
<div>
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
flexbox can do this easily
body {
margin:0 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.header {
white-space: nowrap;
}
<div class="container">
<div class="header">
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
I have a container and inside there are 3 boxes: yellow, green and red.
I gave display:flex to the container and gave justify-content:flex-start for the items to start at beginning.
I wanted to move the red box to the end so I gave margin-right: auto to the yellow box so that the red box could move to end (not sure if this is the exact way to move the red box to end, if not i want help in that too).
So the question is: I want the green box in the vertical middle of the container and I want to move it to the extreme right like the red box (but should be in the middle of container)
How do I do it with flex box?
.container {
height: 500px;
width: 500px;
background-color: royalblue;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.yellowbox {
color: black;
height: 100px;
width: 100px;
background-color: yellow;
margin-right: auto;
}
.greenbox {
color: black;
height: 100px;
width: 100px;
background-color: green;
align-self: center;
margin-left: auto;
}
.redbox {
color: black;
height: 100px;
width: 100px;
background-color: red;
}
<div class="container">
<div class="yellowbox">
<p>the white text</p>
</div>
<div class="greenbox">
<p>the black text</p>
</div>
<div class="redbox">
<p>the red text</p>
</div>
</div>
THIS IS MY CODEPEN LINK: http://codepen.io/ShamZ/pen/pRLELP
you may increase some of the margins but you must allow the flex children to wrap. and use order to put the green box in last position
.container {
height: 500px;
width: 500px;
background-image:linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%),linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%);
background-color: royalblue;
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content:space-between;
}
.yellowbox {
color: black;
height: 100px;
width: 100px;
background-color: yellow;
margin-right: 50%;
}
.greenbox {
order:1;
color: black;
height: 100px;
width: 100px;
background-color: green;
margin: -100px 0 auto auto;
}
.redbox {
margin:0 0 0 auto;
color: black;
height: 100px;
width: 100px;
background-color: red;
}
<div class="container">
<div class="yellowbox">
<p>the white text</p>
</div>
<div class="greenbox">
<p>the black text</p>
</div>
<div class="redbox">
<p>the red text</p>
</div>
</div>
http://codepen.io/gc-nomade/pen/Qdmpbb
I have a div-container with a fix width and some child-elements witch could be bigger than the parent.
Is it possible to let all the child-elements take the full width of the scrollable area from the parent-element (overflow: auto)?
#container {
width: 200px;
background-color: grey;
overflow:auto;
margin:10px;
}
#container p{
display:block;
background-color: green;
white-space: nowrap;
width: 100%;
}
<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
Here is the fiddle. When you scroll to the right, you can see that the child-elements background-color is smaller than the content.
Wrap the content in a div, and set it to display: inline-block:
#container {
width: 200px;
background-color: grey;
overflow: auto;
margin: 10px;
}
#container>div {
display: inline-block;
}
#container p {
display: block;
background-color: green;
white-space: nowrap;
}
<div id="container">
<div>
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
</div>
You could set the child elements to display:table-row;
#container {
width: 200px;
background-color: grey;
overflow: auto;
}
#container p {
display: table-row;
background-color: green;
white-space: nowrap;
}
<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
Add a extra <div> if you need extra controls for styling.
#container {
width: 200px;
background-color: grey;
overflow: auto;
}
#container div {
display: table;
border-spacing: 0 10px;
}
#container p {
display: table-row;
background-color: green;
white-space: nowrap;
}
<div id="container">
<div>
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
</div>
You can use from absolute position property to do that .
#container {
width: 200px;
background-color: grey;
overflow:auto;
margin:10px;
}
#container p{
display:block;
background-color: green;
white-space: nowrap;
position:absolute;
}