Not going on the same level
Youâve got an extra div (which are by default display:block) in there.
Itâs easier to see if you add an outline to the div element. That long line is a empty div
What did I do wrong now?
I donât know. What were you trying to accomplish?
The markup is different than the first post, so itâs hard to tell what you were trying to doâŚ
Inline-grid container not in same level as flex container.
If you mean they donât line up horizontally then they wonât because the flex element is a block container and any inline elements that follow will start on a new line.
If the flex container was an inline-flex container then they would both sit next to each other as they would both be inline-flex and inline-grid containers. However that is not the way you would approach this and if you wanted columns across the screen you would use a main container (flex or grid) to hold your columns.
I also see you are still coding fixed heights for your containers and this is something you will seldom do for elements that contain fluid content like text. Thatâs because the container can never grow and indeed your height:100vh on .container means that your middle section is too tall for the viewport to start with (because you have a header above it). When eventually you add more content than the 100vh the element will never grow and will simply overflow.
You should use min-height in most cases but in your case you would need a page wrapper with min-height:100vh and then the header. middle and footer are all contained in the wrapper. You can then automatically (with flex or grid) make the middle section stretch between the header and footer to give a viewport high initial design that can grow with content.
As Dave said above it all depends on what you wanted to achieve but generally you wouldnât mix inline-grid and inline-flex at the same levels as that makes little sense. You can nest flex inside grid or vice versa but usually you would create the general framework with one technique rather than mixing things willy nilly.
Thatâs what I mean.
I used fixed height because if one of my texts are longer relative to others, that one long text container will stretch the other text container leaving empty space.
Donât understand a single sentence.
I want them to be separate in containers.
They still will be separate containers except that they are controlled by a common parent.
What happens when your text is taller than the height you specified or if I have zoomed my text to read?
Flex will automatically make elements the same height when done properly and doesnât need fixed heights to do it.
That paragraph was explicitly clear and has a clean train of thought. If the concept eludes you then thatâs something you really need to study and try to understand before you move on. I donât expect you to understand everything but would like to see some progress.
If thereâs one thing you can take away from what I have said then it is this:
Avoid fixed heights on containers that hold fluid content. They are seldom required.
We can work on the other aspects of what you donât understand but itâs a two way process. You have to tell me specifically what it is you donât understand and then we can address each issue in turn.
I know itâs quite hard at the beginning because there is a lot to take in but itâll be worth it in the end:)
So whatâs the point of linking the containers to a common parent when it does the same thing without linking to common parent?
I have a new problem too:
When In small screen and whenever I pass 300 px, It goes to the bottom despite being an inline?
Because you set a min-width of 500px. 500px > 300px
No, that wasnât the question
It doesnât do the same thing and you still donât understand that direct children of a flexbox are created automatically as flex-items and their alignment controlled by the parent. Your approach is akin to creating a new table for every table-cell and has no logic to it.
No itâs the same problem Iâve been telling you about and of which you didnât understand a word.
Your element called container is a minimum of 150px wide and your element called parent (really!) is a minimum of 500px wide and therefore for them to sit side by side they would need 650px of screen width. At less than that width they will wrap just like words in a sentence wrap. Thatâs why I said that you should have those two columns as part of a flex box approach and then you can control whether they need to wrap or not. At the moment you just have two disparate blocks of inline content just being pushed around by the space available.
You are still using height:100vh although I told you that won;t work as you expect. If your content in the left column is taller than the viewport the content will overflow as seen in this screenshot where the color does not extend to the bottom.
As I said above you need a structure to hold things together and avoid fixed heights where possible.
Iâve re-hashed your code into something usable but in all fairness I donât really know the look you want to achieve and what plans you have but the following is a more structured approach. It could probably be simplified once the full details are known and indeed we could use grid for this also.
Note how it doesnât go below the fold when it doesnât need to but at the same time will stretch with content when it needs to.
You set the middle element to height:100vh which means that the initial page would have been 100vh + 10px padding + 100px for the header + 16px for the body margins tall. Effectively 126px too tall for any viewport no matter how tall.
These are important concepts to understand before you move on with this or you will continually make the same mistakes.
Uh, yes it is. You askedâŚ
The first column is set to a min-width of 150px;
The âparentâ column is set to a min-width of 500px;
Things wrap when there is no space for it. 150px + 500px means it needs a minimum of 650px to have everything side by side. Actually a little bit more because you donât define any margins, so the browser default is going to be used. You actually wrap at 665px in chrome
Donât understand the comparison because never used tables. But I understand the former.
I wanted the parent container to be wide as hell, because there is a lot of free space, but I didnât know it would wrap. I will do flexbox approach
How can my content be taller than my viewport if it is set to 100% making it stretch all the way down? I wonât add any block elements too if thatâs what you mean by content overflowing because of block element blocking the vh.
.side-column > div{
padding: 5px;
border:1px solid #000;
}
what does the angle bracket mean?
I have been knowing these concepts(and I know most of CSS), but I just forgot them because I didnât use them yet for my websites.
I explained exactly how above?
You have one element at 100vh but you also have other elements above it.
When you add both together they are greater than the viewport height. Itâs basic mathematics so not sure what you donât understand. (Notwithstanding that I have given you an exact example of how it should be done.)
100vh = the viewport height. If for example the viewport is 600px then 100vh = 600px. If your header is 100px and another element is 100vh then now you have content that is at least 700px tall which is now taller than the viewport.
100vh does not mean âjust go to the bottom no matter where my top position isâ.
Itâs called the child combinatorial and selects direct children of a parent element. I.e. it selects children not grandchildren.
Inline elements or inline-block elements ,or inline-flex or inline-grid elements are âshrink to fitâ algorithms. If no width is specified they will only be as wide as their content. Thatâs why they were the wrong choice for you in this case. Flex items (or grid items) can be made to take up all available space automatically without explicit sizing which is what I used in my demo of your code.
Iâm severely deficient in math. so yeah⌠not my strongest field.
I will relearn the concepts again and ty for being patient with me.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.