I have a header div that looks like this in css:
.page-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
align-items: center;
padding: 5px 5px 5px 20px
margin-left: auto;
margin-right: auto;
width: 100%
height: 40px;
}
and a border div under it:
.horizontal-line {
border-bottom: 1px solid red;
margin: auto;
}
My problem is that I can't use padding on the border to make it align with the header or change the margin to fixed numbers, because then it doesn't center.
How would i go about fixing this so that the border adjust to the same width as the header?
Can it be done in CSS only? The reason I ask is that the JS is a template (not ideal I know) and there are other versions on the site using the same template (none of them are using the border div).
I've tried using max-width and that works really good on the large version of the site. Problem with that is that when the page is shrunk it doesn't dynamically adjust the max-width :(
Appreciate any help that I could get :)
Maybe if you can add a container you can do something like this:
You can also add horizontal-line div inside the container and make it full 100% width and get the same result.
.container {
width: 60%;
height: 300px;
background-color: white;
border-bottom: 2px solid black;
}
.page-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
align-items: center;
padding: 5px 5px 5px 20px
margin-left: auto;
margin-right: auto;
width: 100%;
height: 200px;
background-color: yellow;
}
<div class="container">
<div class="page-header"></div>
</div>
or put % on max-width and then when you resize screen it will resize this is not pretty i would rather choose to use container around it.
.page-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
align-items: center;
padding: 5px 5px 5px 20px
margin-left: auto;
margin-right: auto;
/* width: 100%; */
max-width: 50%;
height: 200px;
background-color: yellow;
}
.horizontal-line {
max-width: 50%;
margin-top: 50px;
border-bottom: 2px black solid;
}
<div class="page-header"></div>
<div class="horizontal-line"></div>
Related
I would like to center something in my code with flexbox. It works for all other elements, only here something seems to be wrong.
Does anyone have an idea?
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
This is how it gets displayed in my live server
You can add body tag on css to make center on the page
to make horizontal center
body {
display: flex,
justify-content: center
}
or make vertical center
body {
display: flex,
align-items: center,
height: 100vh /* This is for full height of your screen */
}
or make horizontal and vertical center
body {
display: flex,
justify-content: center,
align-items: center,
height: 100vh
}
Your "Answer" is centered in the box. Are you trying to center the box on the page? In that case, you would need to apply flex styles to the parent. In this case, the body:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0px; /*add to remove body margin which always present and makes v-scroll if not removed*/
}
.answer {
display: flex;
justify-content: center;
margin-bottom: 20px; /*Remove it if their is no other content on page*/
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
I want the image and text to display on the same line, and have the image shrink and stay inline as the window shrinks.
Below is the CSS code. I want the image to shrink as the window shrinks.
.body1 {
display: flex;
flex-wrap: wrap;
background-color: #3803f6;
color: white;
align-items: center;
justify-content: space-between;
height: 500px;
padding: 0px;
margin: -10px;
position: relative;
height: 100%;
justify-content: flex-start;
}
.text {
display: flex;
display: block;
width: 300px;
height: 300px;
padding: 15px;
padding-left: 90px;
color: rgb(201, 212, 254);
}
.imgcontainer {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
padding-bottom: 50px;
background-color: aqua;
}
.img {
display: flex;
background-image: url('blue.jpeg');
padding: 100px;
position: relative;
background-size: cover;
}
Any suggestions would be nice
Give the img container a percentage width and the img element width=100%.
For example if you had 3 images on every line with 10px margin, set img container width to width: calc(100%/3 - 20px) and so on. Same goes with the text, it depends how many element you want on each line and then do the calculations accordingly.
I need to make y-axis scrollable block inside left-navbar. And height of this block must fill all free space of the left-navbar. This way, that left-navbar height is 100% of the page and no more.
But history-overflow is not scrollable, and all history-item elements are shown, so they made all left-navbar height bigger than the page height.
Also, when page height shrinks, history-overflow should fill only free space to make left-navbar height not more than 100%. How to make this?
Codepen sandbox example:
https://codepen.io/car1ot/pen/zYqLqKB
HTML code:
<div className="left-navbar">
<div className="history">
<label>History</label>
<div className="history-overflow">
<div className="history-item">*...some content here...*</div>
*...more history-item(s) here...*
</div>
</div>
</div>
CSS (scss) code:
div.left-navbar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 290px;
height: 100%;
padding: 25px 20px;
box-sizing: border-box;
div.history {
display: flex;
flex-direction: column;
div.history-overflow {
margin-top: 8px;
margin-right: -20px;
padding-right: 14px;
overflow-y: scroll;
div.history-item {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 16px 0 6px;
height: 40px;
width: 100%;
border-radius: 7px;
margin-bottom: 8px;
box-sizing: border-box;
}
}
}
}
If you set overflow: hidden to .history and max-height: 100vh to .left-navbar, I think it does what you want. Not sure in the context of your complete layout though (maybe you don't want to use 100vh but a different value there). The important part is that you have to limit the height somewhere.
If I correctly understan you, this is your solution:
body { padding:0; margin:0; }
div.left-navbar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 290px;
height: 100vh; /* This */
padding: 25px 20px;
box-sizing: border-box;
background: rgba(#000, 0.1);
div.history {
display: flex;
flex-direction: column;
height:100%; /* This */
div.history-overflow {
margin-top: 8px;
margin-right: -20px;
padding-right: 14px;
background: rgba(blue, 0.1);
overflow-y:scroll;
div.history-item {
display: flex;
align-items: center;
padding: 0 16px 0 6px;
height: 100px;
width: 100%;
border-radius: 7px;
margin-bottom: 8px;
box-sizing: border-box;
background: rgba(#000, 0.075);
}
}
}
}
I have a button that is touching the end of the container. I want there to be a gap between the end of the container and the button. The margin bottom I put on the button is not working. Here is the css and html
.events{
height: 100%;
display:flex;
flex-direction: column;
align-items: center; /*center children horizontally*/
overflow-y: auto;
justify-content: start;
background: grey;
}
.show-event-form {
margin-top: 20px;
/**this margin bottom is not making space at the end of the container***/
margin-bottom: 10px;
}
.event-container{
background: linear-gradient(to bottom left, #f2fcef, #eff7f1);
border-left:none;
display: flex;
width:433px;
height: 425px;
border: 2px solid black;
overflow:hidden;
overflow-y: auto
}
.container {
display: flex;
flex-direction: row;
margin: 40px auto;
padding: 20px;
align-items: stretch;
justify-content: center;
}
<div class='container'>
<div class='event-container'>
<div class='events visible'>
<button class='show-event-form rotate'>Add new event</button>
</div>
</div>
</div>
Here is a codepen of the project https://codepen.io/icewizard/pen/ZmJByP . If you click on the pink 6 that is the date tomorow, you will see event text and if you scroll down the button will be at the bottom of the div without padding. How do I fix this?
Can you try this please ?
.show-event-form {
margin-top: 20px;
margin-bottom: 10px;
padding: 10px;
flex-shrink: 0;
}
I want to stretch two div elements (.sideline and .main-contents) to reach the bottom of the page and stay at a certain height from the footer.
The two divs are nested inside a div (.row-elements) with the flex-direction: row since I wanted them to be on the same row.
/* body {
display:flex;
flex-direction:column;
} */
.one-above-all {
display: flex;
flex-direction: column;
/* flex: 1 0 auto; */
/* min-height: 1100px; */
border: solid black 1px;
}
.top-block {
margin: 0 auto;
border: solid black 1px;
width: 300px;
height: 30px;
margin-top: -15px;
}
.headline {
border: solid black 1px;
width: 90%;
align-self: flex-end;
margin-top: 40px;
margin-right: 10px;
height: 160px;
display: flex;
box-sizing: border-box;
}
.row-elements {
display: flex;
flex-direction: row;
margin-top: 40px;
align-items: stretch;
/* min-height: 900px;
flex: 1 0 auto;
*/
}
.sideline {
width: 160px;
border: solid 1px;
margin-left: calc(10% - 10px);
box-sizing: border-box;
flex-shrink: 1
}
.main-contents {
border: solid 1px;
margin-left: 40px;
/* align-self: stretch; */
flex: 1 1 auto;
margin-right: 10px;
box-sizing: border-box;
}
.bottom-block {
align-self: flex-end;
margin-top: auto;
border: black solid 1px;
margin: auto;
width: 300px;
height: 30px;
margin-bottom: -10px;
/* margin-top: 880px; */
}
/* .stretch-test {
border:solid, 1px;
display: flex;
flex-direction: column;
flex: 1 0 auto;
} */
<div class="one-above-all">
<div class="top-block"></div>
<div class="headline"></div>
<!-- <div class="stretch-test"> -->
<div class="row-elements">
<div class="sideline"></div>
<div class="main-contents">jhjkdhfjksdhafjksdahfl</div>
<!--</div> -->
</div>
</div>
<div class="bottom-block">footer</div>
Codepen
The commented out code in the css is the things I have tried.
I tried to set the body as flex and give the row-elements class flex property of 1 0 auto which didn't work.
I tried nesting the row-elements class (which has the flex-direction of row) in another div with a flex-direction of column and setting .row-elements to flex:1 0 auto which also didn't work.
I tried totally removing the the row-elements class but the two divs won't come on the same row.
Any solution will be appreciated.
To stick the footer to the bottom, here are two methods:
Method #1: justify-content: space-between
Align the container vertically with flex-direction: column. Then pin the last element to the bottom with justify-content: space-between.
revised codepen
Method #2: auto margins
Also with the container in column-direction, apply margin-top: auto to the footer, which spaces it away from the other flex items. (Seems you're already familiar with this method.)
Here's a detailed explanation for both: Methods for Aligning Flex Items
Make sure to define a height for your container, unless you simply want content height. In my example I've used height: 100vh on body.