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>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I bet this question was asked a hundred times before but i was unable to find a solution for my exact problem. I have 4 Div boxes and they have a max width of 50% and a min width of 400px, so if the site is smaller (eg. on a phone), the boxes align below each other. Now i want to center the boxes if they are below each other (it looks fine while they are side by side). I tried to use
display: table; margin: 0 auto;
but it doesnt work. Another thing I tried was to place everything inside of another div and give them the parameters above and in addition i tried to play with the width of this one (max-content, min-content, auto, fit-content) but it didn't work either. Does anyone know an easy workaround?
Here a short version of my problem:
.format {
width: 50%;
float: left;
height: auto;
min-width: 500px;
background-color: lightblue;
display: table;
margin: 0 auto;
}
<div class="format">
<p>Landestrainer</p>
</div>
<div class="format">
<p>U17</p>
</div>
<div class="format">
<p>U15</p>
</div>
<div class="format">
<p>Sonstige</p>
</div>
sorry for my partly bad english. Hopefully, it was not that bad :)
I would recommend using display: flex instead to center them.
So you would need to put all 4 divs inside a parent div and apply the css below:
.parent-div {
display: flex;
flex-direction: column;
align-items: center;
}
New Edit based on the screenshot given
My approach for this problem would be something like this:
Make use of display: flex and #media query
.parent-div {
// This will divide the page into 2 columns cause of sub-parents
display: flex;
align-item: center;
}
.sub-parent{
display: flex;
align-items: center;
flex-direction: column;
}
// #media query means that if the screen becomes smaller than 768px (specified below), then apply the CSS queries which in this case apply flex-direction: column to the "parent-div"
#media screen and (max-width: 768px) {
.parent-div {
flex-direction: column;
}
}
<div class="parent-div">
<div class="sub-parent">
<div class="format">
<p>Landestrainer</p>
</div>
<div class="format">
<p>U17</p>
</div>
</div>
<div class="sub-parent">
<div class="format">
<p>U15</p>
</div>
<div class="format">
<p>Sonstige</p>
</div>
</div>
</div>
Here's the link to CSS display: flex guide: Display Flex Guide
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 think this gif explains it very well:
https://gfycat.com/FormalReasonableHagfish
Context: I'm working on a digital catalog (I didn't start the project) for a company that sells TONS of products, sometimes they are small, sometimes big, sometimes wide, etc. They go on a specific area, lets say 400px x 400px.
I did horizontal alignment with flexbox and it works very well but on the vertical axis the products have static values (prod_1 top: 0px, prod_2: top 10px, prod_3 top: 20px...)
EDIT: My question/need is: I want to be able to align (responsively in the horizontal and vertical axis) 1 to 6 images inside 1 div but flexbox only let me choose one axis (flex-direction row or column), what can I do?
The code is something like this:
<div class='container'>
<img class='item_0'>
<img class='item_1'>
<img class='item_2'>
<img class='item_3'>
<img class='item_4'>
</div>
If posible the solution should be in CSS, if it can't be done, then it could be in Javascript or maybe changing a little bit the HTML.
This is because I only have access to CSS and JS. The index.html is generated automatically from a database by an application developed/controlled by another team and it's not that easy/quick to ask them for changes.
The best way I thought is with javascript but it may not be that easy, considering it's a big project and there's A LOT of code already written (not by me).
What do you guys think? I don't need the complete solution but some direction would be really appreciated, thank you!
Ok, so I am not 100% sure about what you need, but here's some code I made that does pretty much what your gif showed. You should be able to tweak it to your liking.
https://codepen.io/AlexWulkan/pen/wmmPvL
HTML:
<div class="container">
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
</div>
CSS:
/* Outer container */
.container {
display: flex;
flex-direction: column;
background-color: #eee;
height: 400px;
width: 400px;
}
/* Each row of boxes */
.row {
display: flex;
align-items: center;
flex: 1;
padding: 0 1rem;
}
/* determines the position of the boxes in each row */
.row:first-child {
justify-content: flex-end;
}
.row:nth-child(2) {
justify-content: center;
}
.row:last-child {
justify-content: flex-start;
}
/* Each box */
.box {
background-color: #666;
height: 100px;
width: 100px;
}
Tell me if there's anything you have questions about and I'll try to answer. The code should be quite self-explanatory though. :)
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;
}
My sidebar is getting pushed down instead of staying inline with my main class, you can view the issue more in my fiddle. (This is one of the first times I've not used bootstrap for a project in a very long time).
view my fiddle.
Instead of float, using flex is a better approach for responsive design.
Try putting your sidebar and main inside a div with display as flex and flex-wrap as wrap.
Here's an example-
.flexbox {
display: flex;
flex-wrap: wrap;
}
.latest-single {
width: 70%;
background-color: blue;
}
.sidebar {
width: 30%;
background-color: green;
}
<div class="flexbox">
<div class="latest-single">
This is our primary content
</div>
<div class="sidebar">
This is our sidebar content
</div>
</div>
You have to choose a way of how to display them. (block,flex,table)
i made it working by adding the display:flex on .container class.
jsfiddle https://jsfiddle.net/31rjm8qb/7/
You have a couple of problems here.
.main has width 100% so .sidebar can not fit
.sidebar is floated while .main is not, so they will not line up
I think it would be a good idea to try out display: flexbox and remove floats altogether.
Check out the following article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/