Empty blogger page: Code inside This is just an empty blogger page with everything ripped out.
i.e., This is all manually added code into a blank page. https://blankbloggerattempt.blogspot.com/
Rather than guessing, try those ideas out and see how they work in practice. You know by now that there is almost always more than one way to approach a layout in CSS. Try the different methods and decide for yourself which is the most appropriate for your requirements.
My advice would be to keep it as simple as possible.
Thank you, I think I found a way that works best with how I have it set up. I just want to make sure I’m not missing any attributes, or forgetting to add something that needs to be added to it.
The only advice I would give, and this is really just nitpicking but I think it would help you in the long run, is to take a little more care with your class names. I would use .container-left or .container-right as I think that it’s the dominant convention. Here are some other reasons why: https://stackoverflow.com/a/20811902
You will need the left and right containers but you can remove the styles from them.
You don’t need the main outer container or the tcell elements unless you have them referenced in your js of course which I have ignored in regards to your question.
They are unnecessary and indeed harmful if content is greater or lesser than the dimension supplied (100% is a fixed height also). Do not use them unless you know why they are in place. An element of fixed height cannot expand if its content is greater than the dimension specified. This has been explained to you multiple times by me and other members and you should have grasped this concept by now. If it is still unclear then take some time to think about why it is wrong and what the implications are.
No never do that unless you know why it is needed. Hint: It is very rarely a good idea to do that.
The only time you really use it is when you use it on the html and body elements in order to gain a min-height of 100% in the first element on the page. This of course is not needed now that we can use vh instead because a 100% viewport height is always available to us now.
The flex version requires less code and does not need the 2 outer elements as already mentioned.
‘better’ is always open to interpretation and depends on specific use-cases, browser support required and a million other things that may influence the decision in which method to use.
These days those floats should be restricted to allowing content to wrap around (as in a floated image in the middle of some text content) and not for columnar layouts as flex (or display:table etc) does it more easily.
Flex containers can have automatic equal heights so you can have vertical borders matching both columns easily just like display:table. Floats cannot do this as columns are unrelated.
I only use floats when I want the text content that follows an image to wrap around the image. I do not use floats for columnar layout and have not done so for many many years.