So I have 2 containers in another container, aligned side by side via flexbox. Only the content of one of these containers should be fixed to the top of the page.
Mark-Up:
<div class="outer-container">
<div class="inner-container1">
Blabla, some normal content in here!
</div>
<div class="inner-container2">
<div class="fixed-box"></div>
</div>
</div>
CSS:
.outer-container {
display: flex;
flex-direction: row;
}
.fixed-box {
position: fixed;
}
But this doesn't work like I want to have it. Here the fixed-box is fixed but is displayed beside the outer-container.
What is wrong?
Thank you for your help!
Johanna
Related
I'm trying to create a layout so that when I click on "See More" to expand the text of one container, the surrounding containers remain in the same position.
There are three containers and each container has two wrappers, a top which contains the title and bottom which contains the image, text and button. I don't know what the length of the titles will be beforehand, so in order to make sure that the boxes, text and button line up, I've given each container justify-content: space-between so that the bottom wrappers always align.
The issue arises after clicking "See More", where the bottom wrapper of each container moves down to fit the height of the container.
.main-container {
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.top-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.bottom-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="main-container">
<div class="container">
<div class="top-wrapper">
<div class="title">
TITLE 1 IS LONG THAT IT GOES TO NEXT LINE
</div>
</div>
<div class="bottom-wrapper">
<div class="image-text-wrapper">
<div class="image-container">
<img class="image" src="https://dummyimage.com/200x200/000/000">
</div>
<div class=“text” id="text">
{{ text }}
//See More code
</div>
</div>
<button>
BUTTON 1
</button>
</div>
</div>
<div class="container">
//second container code
<div>
<div class="container">
//third container code
<div>
</div>
Should I be using a table or is there a simple CSS fix to this?
You can find the full code here: Plunkr
Try adding the following to your .container class:
.container {
align-self: flex-start;
}
The align-self property allows you to override the setting for align-items that is controlling your flex items' alignment.
And adding the following to the .title class:
.title {
min-height: 50px
}
You may need to play around with this setting, but it prevents the image from rendering without any space between it and your title.
Caveat: the CSS you included here in your post isn't exactly what I got when I opened your Plunkr link -- the .container didn't have display: grid; set, but I think this should work nonetheless.
I have been trying to make my child content vertically centered as per the parent container. But the child container is always in relative to parent container. Below is the code I have tried:
HTML
<section id="welcome" class="bg-primary d-flex flex-column">
<h1>Positions</h1>
<div class="container text-center my-auto">
Centered content
</div>
</section>
CSS
#welcome{
min-height:150px;
width: 200px;
}
What I am looking is to make Centered Content text vertically centered as per the whole section.
Here is the codepen link: CodePen
Just make h1 position-absolute to remove it from relative positioning within the DOM...
https://codepen.io/anon/pen/EeVXbe
<section id="welcome" class="bg-primary d-flex flex-column">
<h1 class="position-absolute">Positions</h1>
<div class="container text-center my-auto">
Centered content
</div>
</section>
Your h1 element is what's causing it to mis-align. If you get rid of it (just to test) you'll see centered content move to the center.
display: flex; applies to all of that elements direct children, so you're aligning to aggregate height of both the h1 and the #welcome element. To have Centered Content in the center of a tall square, you could apply some of the styles you have on #welcome to .my-auto:
.my-auto {
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
background: blue;
}
align-items is what does vertical alignment when using display: flex. However, if you use flex-direction: column, the direction is "rotated", so you would use justify-content: center, which is normally for horizontal alignment.
A different approach is to use padding on top and bottom of the content you want to center:
.my-auto {
padding: 50px 0; /* 50px is an arbitrary number, just to demonstrate */
}
Note that this will cause centered content to push all other elements vertically away from it.
I am creating a vertical website that has several different sections.
I want to make each section responsive to the content it has, but it seems like it's not responsive right now. Those two texts on the first row below the navbar is supposed to be in two different lines because it is written like:
<div id="firstRow">
<a id="about" class="smooth"></a>
<div class="intro">
<div>Welcome to my website</div>
<div>Scroll down to know more about us</div>
</div>
</div>
and I tried to use flex to make the first div responsive
div#firstRow {
padding: 100px;
display: flex;
}
How can I make this work?
I think you should put the display: flex property to your .intro div and also add a flex-direction of row to put it on the same line:
.intro {
display: flex;
flex-direction: row;
}
Example on jsFiddle.
do it something like this
.intro > div {
float:left;
clear: both;
display:block;
}
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
It seems such a simple scenario in my head.
I have a container div that has two child elements, the first of which should appear in the top left corner, and the second should appear dead central.
I've tried to use space-between when using the the justify-content property of Flex on the container.
This splits the content into the top-left and top-right corners.
The element in the top-right corner needs to pull-left until it is dead central.
I can't think of a way to achieve this.
I don't want to make a third hidden element, as that seems like a hack.
#container {
display: flex;
justify-content: space-between;
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>
Just add width: 50%; to the container and you are good to go
#container {
display: flex;
justify-content: space-between;
width: 50%;
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>
And if you want the second item to be exactly in the center add transform:translateX(50%);, this will move it according to its width
#container{
display:flex;
justify-content: space-between;
width: 50%;
}
#container div:nth-child(2){
transform:translateX(50%);
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>
This post is an updated version of this one. I will try to explain my issue better than I did in the other post. The issue is related to the position of the footer in two situations.
Situation 1:
The first situation is when the content of the body is not enough to fill the height of the browser, so the footer must be fixed at the bottom of the browser.
Situation 2:
The second situation is when the height of the content of the body is higher and overflow. Here I do not wish the footer be fixed at the bottom, so the footer must be after the bottom of the content.
The first approach and link to the Fiddle example is in the above link from the other post.
By the way. I know this can be accomplished using Javascript, but I would like to use only CSS rules. Any idea?
I suggest to use nested flexbox, example below:
jsFiddle
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
flex: 1;
display: flex;
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="header">header</div>
<div class="container">
<div class="sidebar">sidebar</div>
<div class="content">
<div class="main">
conent<br>conent<br>conent<br>conent<br>conent<br>
conent<br>conent<br>conent<br>conent<br>conent<br>
conent<br>conent<br>conent<br>conent<br>conent<br>
conent<br>conent<br>conent<br>conent<br>conent<br>
</div>
<div class="footer">footer</div>
</div>
</div>