I'm trying to get even space between the font awesome icon and the paragraph of text to it's right, which is separated by a divider (in this the case, the right-border of the icon).
How can I make the space between the icon and it's border even, the same as the space between icons border and paragraph of text? I'm using flex's space-between at the moment, as well as some padding, but the space isn't evenly distributed, and it gets worse as the screen resizes.
body {
height: 100vh;
width: 100%;
}
#container {
height: 90%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#display {
height: 76%;
width: 100%;
background-color: #ECECEC;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
height: 100%;
width: 95%;
}
.content i {
width: 25%;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid black;
}
.text {
width: 50%;
justify-content: center;
align-items: center;
padding: 0 6%;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id="container">
<div id="display">
<div class="content">
<i class="fas fa-balance-scale fa-7x"></i>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque volutpat libero, at venenatis dolor rutrum vel. Donec fermentum eleifend tortor, at sollicitudin est rutrum nec. Fusce eget vehicula ex. Vestibulum semper gravida nulla, in aliquam ipsum dignissim nec.</p>
</div>
</div>
</div>
</div>
Try this.
.content i {
padding-right: 35px;
}
Related
As the title says, here's my example
I've already tried doing this using flex with position absolute but the problem is the responsiveness. How do I make this better? Is there a way that I could do this with just flexbox and not use position absolute while making the first row of the first and last column have equal height?
Here's my initial code:
<div class="block uk-width-1-1">
<div class="content-wrapper">
<div class="content uk-position-relative">
<div>
<div class="uk-grid uk-child-width-1-4 uk-flex-between">
<div class="card--wrapper">
<div class="card">
<h3>Lorem Ipsum</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
</div>
</div>
<div class="card--wrapper">
<div class="card">
<h3>Lorem Ipsum</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
</div>
</div>
</div>
<div class="uk-grid uk-child-width-1-4 uk-flex-between">
<div class="card--wrapper">
<div class="card">
<h3>Lorem Ipsum</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
</div>
</div>
<div class="card--wrapper">
<div class="card">
<h3>Lorem Ipsum</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
</div>
</div>
</div>
</div>
<div class="image--wrapper uk-position-absolute uk-width-1-3">
<div class="image">
<!-- Image here (middle column)-->
<img src="/../images/hero-sample.png" alt="image">
</div>
</div>
</div>
</div>
</div>
CSS
.image--wrapper {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.block {
background: green;
}
h3, p.description {
color: white;
font-family: 'Poppins';
}
p.description {
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: rgba(255,255,255,0.7);
margin-bottom: 0;
}
h3 {
font-weight: 600;
font-size: 16px;
line-height: 28px;
}
.card {
max-width: 240px;
padding: 20px;
box-sizing: border-box;
border: 1px solid rgba(255,255,255, 0.3);
}
.child-width-1-4 > div {
width: 25%;
}
.width-1-3 {
width: 33%;
}
.grid {
display: flex;
flex-wrap: wrap;
margin: 18.12px 0 0 0;
padding: 0;
}
.flex-between {
justify-content: space-between;
}
.position-absolute {
position: absolute !important;
}
.position-relative {
position: relative !important;
}
#media screen and (max-width: 1200px) {
.content-wrapper {
padding: 60px 25px
}
}
In this solution, the outer container is a grid with 12 columns. The middle column (.col2) takes up twice the space of col1 and col3. The -1 in grid-column: 10 / -1 means to span to the end of the grid, wherever it is.
Inside, I make the first and last columns into flexboxes, so that their children can take up an even amount of space in their respective containers. All spacing between columns and rows is accomplished using gap.
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
min-height: 100vh;
min-height: 100dvh;
gap: 1rem;
padding: 1rem;
}
/* 3 columns */
.col1 {
grid-column: 1 / 4;
}
/* 6 columns */
.col2 {
grid-column: 4 / 10;
}
/* 3 columns */
.col3 {
grid-column: 10 / -1;
}
.col1,
.col3 {
display: flex;
flex-direction: column;
gap: 1rem;
}
.col1 > *,
.col3 > * {
flex: 1;
}
body { margin: 0; }
* { box-sizing: border-box; }
.col2, .container > * > * { border: 1px solid; }
<div class="container">
<div class="col1">
<div></div>
<div></div>
</div>
<div class="col2"></div>
<div class="col3">
<div></div>
<div></div>
</div>
</div>
jsFiddle
there is more than one way to do that. I personally prefer using flex for such situations because it's more flexible for adjustment.
so basically, I used three containers in a row flex-direction then in the containers on the sides, I put 2 divs in each with column flex-direction. that's it.
you can control max and min width as you wish.
body {
background: lightgrey;
display: flex;
justify-content: center;
}
#container {
/* background: lightcoral; */
width: 100%;
height: 400px;
display: flex;
flex-direction: row;
}
.middle {
width: 60%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.left, .right{
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left div,
.right div {
border: 1px solid;
width: 100%;
height: 50%;
margin: 10px;
}
.middle div {
border: 1px solid;
width: 95%;
height: 100%;
margin: 10px;
}
<body>
<div class="container" id="container">
<div class="left">
<div></div>
<div></div>
</div>
<div class="middle">
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
</div>
</body>
In your problem its better to display grid instead of flex
div1: middle
div2: left-top
div3: left-bottom
div4: right-top
div5: right-bottom
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 2 / 3 / 5; }
.div2 { grid-area: 1 / 1 / 2 / 2; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 1 / 5 / 2 / 6; }
.div5 { grid-area: 2 / 5 / 3 / 6; }
I am trying to create a webpage with a vertically and horizontally centred div, with defined height and width, split down the middle. Almost like an open book.
I have no problems with achieving this in Chrome/Firefox/Safari but cannot get this to reflect in IE11 as half of the 'book' has a greater height than the other half, which leads me to believe the 'height: 863px' property in .loginContainer is causing the issue as it looks marginally better once I move this.
Not totally sure but I think I need to specify an explicit height for the container to stop the content inside becoming squashed - simply removing this property allows the container to be too small so content looks cramped once I put text in there.
I have tried to remove the property and use padding on the content inside to create a bit of space but I don't feel this is the right approach and makes it appear totally different to the mock ups I'm following.
I have created a JSFiddle found here;
https://jsfiddle.net/e02cqdr6/2/
and think the issue lies at;
.loginContainer {
display: flex;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 1;
margin: 0 auto;
width: 1338px;
height: 863px;
border-radius: 15px;}
html,
body {
background-color: rgb(27, 27, 27);
height: 100%;
min-height: 100%;
/* for firefox */
}
.pageContainer {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.loginContainer {
display: flex;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 1;
margin: 0 auto;
width: 1338px;
height: 863px;
border-radius: 15px;
}
.leftContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: center;
background-color: green;
width: 621px;
border-radius: 15px 0 0 15px;
}
.rightContainer {
display: flex;
flex-direction: column;
background-color: #ffffff;
align-items: center;
width: 717px;
border-radius: 0 15px 15px 0;
}
.titleContainer {
display: flex;
flex-direction: column;
width: 100%;
}
input {
height: 30px;
width: 220px;
padding: 0 10px 0 10px;
box-shadow: none !important;
border: 1px solid rgb(243, 241, 241);
border-radius: 15px;
background-color: rgb(243, 241, 241);
color: grey;
}
a {
font-size: 0.7rem;
color: orange;
text-decoration: none;
}
.nextBtn {
margin-top: 10px;
background-color: rgb(134, 200, 223);
color: #ffffff;
}
.assetContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.descContainer {
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
}
.descHeading {
margin: 0 auto;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: normal;
font-weight: 100;
padding-bottom: 5px;
}
.productDesc {
margin: 0 auto;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 100;
width: 440px;
}
.assetLogoBlack {
width: 100%;
height: 100%;
}
.logoContainer {
width: 100%;
}
.servicesLogo {
width: 30%;
}
<div class="pageContainer">
<div class="loginContainer">
<div class="leftContainer">
<div class="assetContainer">
<div class="logoContainer">
<img src="/assets/ilogo.svg" class="servicesLogo">
<img src="/assets/cslogo.svg" class="servicesLogo">
</div>
<div class="descContainer">
<p class="descHeading">Lorem ipsum dolor sit amet</p>
<p class="productDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat sodales arcu id tincidunt. Ut a laoreet risus. Suspendisse potenti. Curabitur in ultricies risus. Vivamus convallis non libero commodo malesuada. Cras eu neque vulputate
lectus sagittis ullamcorper sit amet vitae ante. Integer pellentesque neque eget molestie vehicula. </p>
</div>
</div>
</div>
<div class="rightContainer">
</div>
</div>
</div>
So I expect it to look like this: https://ibb.co/T2Cc59V
but instead it looks like this: https://ibb.co/M8zZ9rs
To reiterate, the problem only exists in IE11.
Nothing stands out as obvious and I have no errors thrown so am totally stumped as to how to resolve this.
Thank you for all the input, I have ended up stripping this back to bare bones to see what is causing the issue as it does work fine on the jsfiddle. It turns out it is the white space around the asset I need to use for the background makes it appear as though it doesn't fill the parent div.
I am trying to build a basic user interface using flexbox, I have this so far..
body,html {
margin:0;
padding:0;
height:100%;
}
.container {
height:100%;
display:flex;
flex-direction:column;
}
.top {
flex:4;
display:flex;
background:wheat;
align-items: center;
justify-content: center;
}
.bottom {
flex:1;
background:teal;
}
.bottom_content {
display:flex;
flex-direction:column;
}
.section1 {
flex:1;
font-size:20px;
text-align:center;
}
.section2 {
flex:1;
}
.btn {
background:red;
color:white;
padding:20px;
}
<div class="container">
<div class="top">
<span>TOP CONTENT</span>
</div>
<div class="bottom">
<div class="bottom_content">
<div class="section1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span>
</div>
<div class="section2">
<div class="btn">
THIS IS A BUTTON
</div>
</div>
</div>
</div>
</div>
I am trying to achieve this...
How can I make the bottom section with equal height and make the content within it vertically and horizontally centered?
I am also planning on using fittext.js or similar to make the button and the text above fit into the flex item.
Where am I going wrong?
The problem
The issue with your current code is that .bottom is not filling the available space and that the default alignment and justification is being used.
The fix
The desired output can be achieved by doing the following:
Remove flex:1; from .section1 and .section2. This stops these divs from expanding to fill the available space
Add align-items: center; and justify-content: space-evenly; to.bottom_content. This will center align and evenly space out the .section1 and .section2 divs
Add display: flex; to .bottom. This will make .bottom expand to fit the available space
Change flex: 1; to flex: 1 0 auto; on .bottom. This will stop .bottom from reducing in size when the height of the window is small
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.top {
flex: 4;
display: flex;
background: wheat;
align-items: center;
justify-content: center;
}
.bottom {
/*Change*/
flex: 1 0 auto;
background: teal;
/*Add*/
display: flex;
}
.bottom_content {
display: flex;
flex-direction: column;
/*Add*/
align-items: center;
justify-content: space-evenly;
}
.section1 {
/*Remove*/
/*flex:1;*/
font-size: 20px;
text-align: center;
}
.section2 {
/*Remove*/
/*flex:1;*/
}
.btn {
background: red;
color: white;
padding: 20px;
}
<div class="container">
<div class="top">
<span>TOP CONTENT</span>
</div>
<div class="bottom">
<div class="bottom_content">
<div class="section1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span>
</div>
<div class="section2">
<div class="btn">
THIS IS A BUTTON
</div>
</div>
</div>
</div>
</div>
I have commented some of your code. Please Check
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.top {
flex: 4;
display: flex;
background: wheat;
align-items: center;
justify-content: center;
}
.bottom {
flex: 1;
background: teal;
}
.bottom_content {
display: flex;
flex-direction: column;
}
.section1 {
<!-- flex: 1;
-->font-size: 20px;
text-align: center;
}
.section2 {
flex: 1;
}
.btn {
background: red;
color: white;
padding: 20px;
margin-top: 25px;
}
<div class="container">
<div class="top">
<span>TOP CONTENT</span>
</div>
<div class="bottom">
<div class="bottom_content">
<div class="section1">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </div>
<button class="btn">
THIS IS A BUTTON
</button>
</div>
<!-- <div class="section2"> -->
<!-- <div class="btn"> -->
<!-- THIS IS A BUTTON -->
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
justify-content:center and display:flex is the key.
you can adjust margin as you wish,besides it should do the trick.
.bottom_content {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.section2 {
flex: 1;
display: flex;
justify-content: center;
}
.btn {
background: red;
color: white;
padding: 20px;
width: fit-content;
position: absolute;
margin-top: 10px;
}
I am trying to achieve this layout The black thin line shows the border of the outer div. Inside, there are two divs (red and blue). I would like to position them next to each other with a little space in between. Additionally, the top/bottom of the red div and the top/bottom of the blue div should be equal. The left and right should also be equal. This should be equal no matter the size of the browser.
I've tried playing around with the margins but I can't do it so that its exactly equal. Here's is the link for the full code of my attempt.
Here is a snippet of my code:
#about {
background-color: #D1C9BE;
border-style: solid;
border-color: black;
position: relative;
}
#aboutImage {
border-style: dotted;
border-color: white;
background-color: red;
height: 150px;
width: 150px;
margin-top: 200px;
}
#aboutInfo {
border-style: dotted;
border-color: white;
background-color: blue;
width: 300px;
height: 400px;
font-size: 35px;
text-align: right;
margin-left: 20px;
}
Also is there a way to automatically size a div based on how much text is in it? I've seen solutions for two divs of equal size just positioned side by side but how would I do so with two divs, different sizes?
Use flex-box. Plus don't mix flex box and traditional positioning styles.
You can accomplish what you need with display: flex and justify-content: space-evenly; and align-items: center;
body {
margin: 0;
}
html, body {
height:100%;
}
/* FULLPAGE */
.section {
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
/* ABOUT */
#about {
background-color: #D1C9BE;
}
#aboutImage {
border-color: white;
background-color: red;
height: 150px;
width: 150px;
}
#aboutInfo {
border-color: white;
background-color: blue;
font-size: 35px;
}
#aboutInfo p {
font-size: 15px;
}
<html>
<body>
<section id="about" class="section">
<!-- Picture -->
<div id="aboutImage"></div>
<!-- Description -->
<div id = "aboutInfo">
Lorem Ipsum.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus. Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus. Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris. In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien a ex porta dictum.
</p>
</div>
</section>
</body>
<html>
You can use flex.
For the parent container, type it
.container {
display: flex;
flex-direction:row;
align-items: center;
}
You can use flexbox for that. It will help you horizontally (justify-content) and vertically (align-items) center your elements with equal space around them (justify-content: space-evenly). In this case your child elements don't need any extra styling.
#about {
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 20px;
background-color: #D1C9BE;
border-style: solid;
border-color: black;
}
#aboutImage {
border-style: dotted;
border-color: white;
background-color: red;
height: 150px;
width: 150px;
}
#aboutInfo {
border-style: dotted;
border-color: white;
background-color: blue;
width: 300px;
height: 400px;
font-size: 35px;
text-align: right;
}
As for your last question re automatically sized divs, this is actually the default if you omit the height property. The div will then be just as tall as your number of lines of text (assuming you keep the width set).
I want to make a div which:
Stretches to 100% width and height of browser window,
Makes all content inside centered vertically and horizontally,
Has min-height = all content + 10% of top&bottom padding.
I've made some code:
html {
height: 100%;
}
body {
height: 100%;
}
.blah {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
text-align: center;
padding: 10% 0 10% 0;
background: #ffb3b3;
}
<div class="blah">
<p>Here goes some content</p>
</div>
The same on jsfiddle
As you can see, it works fine, except point 3 - when scaling down, the content overflows the div around it:
screen
I've tried to set for .blah:
height: auto;
min-height: 100% !important;
position: relative;
but then it doesn't work on bigger resolutions - div is bigger than the browser height.
This solution doesn't work.
I will be extremely grateful for any ideas.
you just need to use box-sizing:border-box
html,
body {
height: 100%;
margin: 0
}
.blah {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background: #ffb3b3;
min-height: 100%;
padding: 10% 0;
box-sizing: border-box;
}
<div class="blah">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus rhoncus erat sit amet ullamcorper. Cras quis vulputate ex, ut sollicitudin massa. Vivamus vitae ipsum posuere, eleifend quam quis, pulvinar tellus. Cras semper, lectus sit amet molestie
</div>