I have three elements in a div which itself is in another div. I want the first two elements of the inner div to be centered in relation to the outermost div and stacked on top of each other, while the third element should be at the bottom in relation to the outermost div as well. This is a WordPress project, which I am new to, so I don't want to change any of the div or class structure, just style the existing classes. I would prefer Flexbox-only solutions.
Here's the html:
<div class="outerDiv">
<div class="innerDiv">
<p class="e1"> Centered element 1 </p>
<p class="e2"> Centered element 2 </p>
<p> Bottom element </p>
</div>
</div>
Here's the relevant CSS:
.outerDiv{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 90px 0 0 0;
box-sizing: border-box;
}
.innerDiv {
align-self: center;
margin: 30px 30px 30px 30px;
}
.e1 {
margin: 10px 0;
}
.e2{
margin: 10px 0;
}
.innerDiv {
/*...*/
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.e1 {
margin: 10px 0;
margin-top: auto;
}
.e2{
margin: 10px 0;
margin-bottom: auto;
}
Edit: Added width/height properties to .innerDiv
Welcome to Stackoverflow. I've updated this to meet your new requirements:
.outerDiv {
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
}
.innerDiv {
width: 50%;
height: 100%;
}
.e1 {
width: 100%;
height: 25%;
}
.e2 {
width: 100%;
height: 25%;
}
.e3 {
width: 50%;
height: 25%;
position: absolute;
bottom: 0;
}
Related
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I want to create a bar to go along the top of a box on a website that I am working on.
This is the desired outcome
Here's my code, I keep getting this overlap
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
height: 30%;
margin: 1vw;
padding: 1vw;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.section h1 {
position: relative;
}
.section_header {
border: 4px solid #FBA7FF;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 95%;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
So far I've got the parent div with position: relative and the child element with position: absolute then setting top and left to 0 width to 100% and bottom to 95% to attempt the desired effect yet it creates an overlap.
I can see that 0 is within the div and doesn't take into account the border which is perhaps why this is happening.
* {
box-sizing: border-box;
margin: 0;
}
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
width: 100%;
display: inline-block;
text-align: center;
}
.section_header {
width: 100%;
background: #FBA7FF;
display: block;
height: 70px;
margin-bottom: 20px;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
Remove the position:absolute and use flex-direction:column;
* {
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
background: lightgrey;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
margin: 1vh auto;
height: 30%;
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
.section_header {
height: 50px;
width: 100%;
background: orange;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
I have the following layout where I am using position: sticky to place an image near the bottom right corner of the page (below a flex layout):
.footer-logo {position: sticky; bottom: 50px; z-index: 100; margin: 50px; padding: 25px; width: 100px; height: 100px; background-color: green; float: right;}
.flex-container {height: 400px; display: flex; flex-wrap: wrap; background-color: #f2f2f2; padding-top:20px; justify-content: center;}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100"></img>
The img sticks in the correct position, but below the flex-container there is whitespace which spans the full width of the page and is the same height as the img (including padding & margin).
How do I not display this whitespace whilst still retaining the correct positioning of the img?
You can remove it using negative margin equal to the height. That space is the space of the image since position:sticky will keep the element part of the flow:
.footer-logo {
position: sticky;
bottom: 50px;
z-index: 100;
padding: 25px;
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.flex-container {
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
padding-top: 20px;
justify-content: center;
margin-bottom: -150px;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100">
You can use this code
body {
margin: 0;
}
.footer-logo {
position: sticky;
z-index: 100;
padding: 25px;
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.flex-container {
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
padding-top: 20px;
margin-bottom: -150px;
justify-content: center;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100" alt="100x100" />
I realised that I just needed to use position: fixed with bottom and right also set:
body {
margin: 0;
}
.footer-logo {
position: fixed;
bottom: 50px;
right: 50px;
z-index: 100;
padding: 25px;
width: 100px;
height: 100px;
background-color: green;
}
.flex-container {
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
padding-top: 20px;
margin-bottom: -150px;
justify-content: center;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100" alt="100x100" />
I know how to vertically center a div on a web page alone by using position: absolute; but how can I make the child div call internal-container vertically center in the parent div call message-box that contains a scrollbar the red cuts off AKA the internal-container how can I resolve this?
body{
color: white;
}
#message-box{
margin-top: 5px;
position: fixed;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
min-height: 150px;
max-height: 250px;
width: 350px;
background-color: black;
overflow: auto;
}
#internal-container{
background-color: red;
height: 80%;
width: 80%;
word-break: break-all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div id='message-box'>
<div id='internal-container'>
<p>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
</p>
</div><!--</internal-container>-->
</div><!--</message-box>-->
Make parent div display: flex and justify-content: center;
* {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 300vh;
background: #338cb0;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 80%;
height: 120px;
background: #770022;
}
<div class="parent">
<div class="child"></div>
</div>
Does anyone know how to align an <hr> element inside a flex-container. When I do flex-start all of the other elements align, apart from the <hr>. I need a solution that doesn't use position: absolute on the <hr> element because this affects the document flow and causes other issues.
codepen: https://codepen.io/emilychews/pen/QaPQaW
CSS
body {margin: 0; padding: 0;}
.box {
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
display: block;
background: white;
height: 3px;
width: 75px;
margin-left: 0 auto;
}
HTML
<div class="box">
<h1> Hello </h1>
<hr>
<p> Thanks </p>
</div>
The hr element has a default margin set, and in Chrome it is set to:
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
And as auto margin's in Flexbox override the justify-content/align-* properties, you need to remove it, which e.g. margin: 0; will, and make the in this case align-items: flex-start; be properly applied.
Stack snippet
body {margin: 0; padding: 0;}
.box {
color: white;
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
background: white;
height: 3px;
width: 75px;
align-self: flex-start;
margin: 0; /* added */
}
<div class="box">
<h1>Hello</h1>
<hr>
<p>Thanks</p>
</div>
Change your hr to
background: white;
height: 3px;
width: 75px;
margin-left: 0;
I have used CSS flex to display two divs side by side which are contained inside a wrapper and I have been trying so that inside #myClippetWrapper is where I set the height, so in the child elements of #myClippetWrapper I can just set height: 100%;.
But as you can see from running the snippet below all of the elements inside #myClippetWrapper go outside of the main section, they are all hanging out of the main content div?
I don't want to use overflow: auto because I do not want a scroll bar there, I just need the child elements of #myClippetWrapper to not be outside of the main section/ div.
main {
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 8px;
background-color: red;
width: 100%;
max-width: 50%;
height: auto;
}
#myClippetWrapper {
display: flex;
height: 700px;
}
#clippetNav {
padding: 10px;
width: 250px;
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#codeAndNotesWrapper {
display: flex;
width: 100%;
}
#codeAndNotesWrapper>div {
flex-basis: 100%;
height: 100%;
}
#codeView {
padding: 10px;
/*flex: 0 0 40%;*/
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#noteView {
padding: 10px;
/*flex: 1;*/
height: 100%;
background-color: #222222;
}
#codeNotesEditor {
height: 100%;
background-color: #EAEAEA;
}
<main>
<div id="myClippetWrapper">
<div id="clippetNav">
</div>
<div id="codeAndNotesWrapper">
<div id="codeView">
</div>
<div id="noteView">
<div id="codeNotesEditor">
</div>
</div>
</div>
</div>
</main>
In many cases, flexbox eliminates the need to use percentage heights.
An initial setting of a flex container is align-items: stretch. This means that in flex-direction: row (like in your code) flex items will automatically expand the full height of the container.
Alternatively, you can use flex-direction: column and then apply flex: 1 to the children, which can also make a flex item expand the full height of the parent.
main {
max-width: 50%;
margin: 10px auto;
padding: 8px;
background-color: red;
}
#myClippetWrapper {
display: flex;
height: 700px;
}
#clippetNav {
display: flex;
padding: 10px;
width: 250px;
margin-right: 10px;
background-color: #222222;
}
#codeAndNotesWrapper {
display: flex;
width: 100%;
}
#codeAndNotesWrapper>div {
display: flex;
flex-basis: 100%;
}
#codeView {
display: flex;
padding: 10px;
margin-right: 10px;
background-color: #222222;
}
#noteView {
display: flex;
flex-direction: column;
padding: 10px;
background-color: #222222;
}
#codeNotesEditor {
flex: 1;
background-color: #EAEAEA;
}
<main>
<div id="myClippetWrapper">
<div id="clippetNav"></div>
<div id="codeAndNotesWrapper">
<div id="codeView"></div>
<div id="noteView">
<div id="codeNotesEditor"></div>
</div>
</div>
</div>
</main>
jsFiddle
Add
box-sizing: border-box;
To your child elements. This will make the padding show on the inside of the box rather than the outside and will not increase the overall size.
Add the box-sizing property..
* {
box-sizing: border-box;
}
main {
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 8px;
background-color: red;
width: 100%;
max-width: 50%;
height: auto;
}
#myClippetWrapper {
display: flex;
height: 700px;
}
#clippetNav {
padding: 10px;
float: left;
width: 250px;
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#codeAndNotesWrapper {
display: flex;
width: 100%;
}
#codeAndNotesWrapper>div {
flex-basis: 100%;
height: 100%;
}
#codeView {
padding: 10px;
/*flex: 0 0 40%;*/
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#noteView {
padding: 10px;
/*flex: 1;*/
height: 100%;
background-color: #222222;
}
#codeNotesEditor {
height: 100%;
background-color: #EAEAEA;
}
<main>
<div id="myClippetWrapper">
<div id="clippetNav">
</div>
<div id="codeAndNotesWrapper">
<div id="codeView">
</div>
<div id="noteView">
<div id="codeNotesEditor">
</div>
</div>
</div>
</div>
</main>
A big factor with setting your
display: flex;
Is padding and height can make a nasty couple;
Take this example into account:
display: flex;
height: 100%;
padding-top: 1vh;
This would essentially make your element the pages height, plus 1% of the view height, and of course give you a child element thats taller than its parent element.
This isn't a direct answer to your question, instead one to people looking here for why their child elements may be acting up.