Maneuvering two blocks of codes side by side


#1

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/

This one uses a regular blogger template
https://testingcodes12345.blogspot.com/

What I’m doing is getting the blank page with no template code to look the same as the one that has the template code added in automatically.

I was able to do this:

Before both blocks were sitting vertically on top of each other.
https://jsfiddle.net/9yor1fmn/15/

Am I missing any attributes from these codes?

From the parent container?
Does it need a position, or anything like that?

Can someone look at this for me please and tell me if I need to adjust anything.

Does everything look good? Is there anything you would change or modify or anything like that?
@PaulOB @Ray.H

I just want to make sure it is set up properly.

So, this is what I did, I put containers around the left and right block of codes.
Then I added a parent container to contain them both.

.container {
  width:936px;
  height:1121px;
  background:green;
  
}

.container-left {
  float: left;
  margin: 0;
}

.container-right {
  float: left;
  margin: 0 0 0 64px;
}


#4

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.


#6

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.


#7

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


#8

I want to try converting this to flex and see how that’s done.

Last updated version
https://jsfiddle.net/8aebp5zt/87/

I would be using these attributes I think.
or maybe not all of them.

       {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-content:space-between;
  flex-wrap:wrap;
}

Do the containers get removed?


.container {
  width:936px;
  height:1121px;
  margin-top:100px;
  margin-bottom:100px;
}

.container-left {
  float: left;
  margin: 0;
}

.container-right {
  float: left;
  margin: 0 0 0 64px;
}

Would these now get deleted?


.container-left {
  float: left;
  margin: 0;
}

.container-right {
  float: left;
  margin: 0 0 0 64px;
}

#9

Last updated trying to incorporate flex.
https://jsfiddle.net/8aebp5zt/90/

.container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-content:space-between;
  flex-wrap:nowrap; 
  margin-top:100px;
  margin-bottom:100px;
}

.container-left {
  float: left;
  margin: 0;
}

.container-right {
  float: left;
  margin: 0 0 0 64px;
}

#10

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.

e.g. These are the rules needed:

/*
.outer {
	display: table;
	height: 100%;
	margin: 0 auto;
}
.tcell {
	display: table-cell;
	vertical-align: middle;
}
*/
.container {
	display: flex;
	justify-content:space-between;
	width:936px;
	margin:100px auto;
}
/*
.container-left {
	float: left;
	margin: 0;
}
.container-right {
	float: left;
	margin: 0 0 0 64px;
}
*/

Don’t keep adding fixed heights when height is controlled by content.


#11

What do you mean by fixed heights?
https://jsfiddle.net/8aebp5zt/90/


#12

Change all fix heights to

height: 100%;

or most of them.


#13

These:

.container {
  height: 100%;
}

and in the previous demo:

.container {
	width:936px;
	height:1121px;
{

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.


#14

Which is better to use here, float or flex?

I know float is more widely used, or the more accepted method for browsers I think.

Float
https://jsfiddle.net/8aebp5zt/91/

Flex
https://jsfiddle.net/8aebp5zt/92/


#15

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.


#16

I was more referring to the vertical lines down the middle.

I have them set to a fixed height.

oops, not the lines, it was something else. not related.

it was just adding height again when it wouldn’t make sense to do so.

Example:

.wrapb {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;

#17

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.


#18

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.


#19

I have it set so they don’t wrap.

That’s why I added a parent container to hold the 2 left and right containers.


#20

That’s not what I meant.

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.


#21

If I add table instead of flex, what else would get changed?
https://jsfiddle.net/8aebp5zt/94/

Would I add back in the left and right containers?

.container {
	display: table;
	justify-content:space-between;
	width:936px;
	margin:100px auto;
}

#22

You would need to set the left and right containers to display:table-cell.

e.g.

.container-left,
.container-right{
	display:table-cell;
  vertical-align:top;
}
.container-right {
	padding: 0 0 0 64px;
}

Get rid of the justify-content as that applies to flex containers not tables.


#23

Would you say that table is better than flex?