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).
Related
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'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;
}
I have this code that I need the div to resize vertically as the text inside increases. The bottom should remain fixed as div increases upwards
<div class ="div-increase">commodo sit amet, posuere lobortis quam. Vestibulum d
</div>
How can I achieve this using css
.div-increase{
position: relative;
display: inline-block;
width: 210px;
height: 100px;
max-width: 210px;
max-height: 250px;
min-height: 1.5em;
border: 1px solid blue;
padding: 3px;
border-radius: 10px;
line-height: normal;
color: red;
}
you can achieve this using flexbox with flex-direction: column-reverse. I've also made the div editable, so you can try the snippet typing some extra text:
.div-increase {
position: relative;
display: flex;
flex-direction: column-reverse;
width: 210px;
height: 100px;
max-width: 210px;
max-height: 250px;
min-height: 1.5em;
border: 1px solid blue;
padding: 3px;
border-radius: 10px;
line-height: normal;
color: red;
}
<div class="div-increase" contenteditable="true">commodo sit amet, posuere lobortis quam. Vestibulum d
</div>
here is my favorite flexbox cheat-sheet, the official docs and browser support
I'm using css grid and in this case i have made a div that fit in a grid (the green box)(at the right the color is green not yellow) and inside this div i have made another grid (2 columns) and in one at the left there is the image and at the right there is another div (the red one) with a paragraph.
As you can see i have used and height of 61vh otherwise the image doesn't fit well and than i had to set also an height for the red box otherwise it goes outside of the green box.
I think this is not ther right way of doing it, how can i do it without setting an exact height?
.GreenBox{
margin-bottom: 10px;
grid-column: 2/4;
grid-row: 6/7;
width: 100%;
height: 61vh;
display: grid;
margin-left: -200px;
margin-right: -10px;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
border: 2px solid greenyellow;
}
.RedBox{
grid-column: 2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
border: 1px solid red;
height: 60.6vh;
padding-left: 10px;
}
.PurpleBox{
grid-row: 2;
border: 1px solid blueviolet;
}
.Image{
width: 100%;
height: auto ;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
<div className="GreenBox">
<img className="Image" src={foto2}/>
<div className="RedBox">
<p className="Paragraph">ILorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tellus eget velit cursus feugiat. Proin quis condimentum velit, a pellentesque erat. Maecenas consectetur eros et nibh condimentum pharetra. </p>
</div>
</div>
PS: the problem is that if that if i resize the page there is always a bottom gap, i would like to remove that and fit well the content in the greenbox.
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>