Maneuvering two blocks of codes side by side


#24

It is better if you need to support back to IE8.

Flex is much more sophisticated than display:table and has multiple methods for aligning and spacing content which display:table/table-cell does not have.


#25

What’s the proper way to set up grid?
https://jsfiddle.net/8aebp5zt/99/

.container {
	display: grid;
  grid-gap: 12px 4px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(5, 1fr);
	width:936px;
	margin:100px auto;
}
/*
   grid-template-rows: repeat(1, 50px);
   grid-template-columns: repeat(5, 50px);
   grid-template-rows: 50px 50px 50px ;
   grid-template-columns: 50px 50px 50px 50px 50px;
   grid-column-gap: 4px;
   grid-row-gap: 12px;
    */

#26

My grid skills are minimal but I would guess for your set up you would need auto columns and no defined rows as you don’t have any rows as such.

e.g.

.container {
	display: grid;
  grid-gap: 12px 4px;
  grid-template-columns:auto auto;
	width:936px;
	margin:100px auto;
}

(I am going offline now so someone else can jump in if you have more questions)


#27

I don’t think it needs the 12px, right?
grid-gap: 64px;

https://jsfiddle.net/8aebp5zt/103/

.wrapc,
.wrapd,
.wrape,
.wrapf,
.wrapg,
.wraph {
  margin-top: 45px;
}

#28

What do you use then instead of floats, your preferred method?


#29

or, would I set it as:

grid-gap: 0 64px;

I’m thinking this:
grid-gap: 64px;


#30

You don’t need the magic 64px number just justify the space automatically.

e.g.

display: grid;
grid-template-columns:auto auto;
justify-content:space-between;
width:936px;
margin:100px auto;
}

If older browser support is required I would use display:table but if older support is not required I use flex.


#31

To change the background color height is required:

https://jsfiddle.net/8aebp5zt/108/

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

#32

No it’s not.

You just haven’t contained the floated left and right columns.

I can point you to about a million posts where containing floats has been mentioned.:slight_smile:

Remove the height (and the height:100% you have above it) and contain the floats properly. I’ve given you the answer before so do a little research and find it for yourself (hint: it does not need extra elements).


#33

That’s part of this though:

Unrelated

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

#34
 overflow: hidden;

or

clearfix

Which I’ve never used before.


#35

Yes either of those or indeed set the container to display:table as that will contain floats also.

The height:100% there is not needed and indeed if the element was not display:table you would get your content all cut off. Luckily display:table treats height as a minimum and lets content expand the container. Details are important.:slight_smile:


#36

This says to stay away from clearfix.
https://meiert.com/en/blog/no-clearfix/


#37

I[quote=“asasass, post:36, topic:308660, full:true”]
This says to stay away from clearfix.
https://meiert.com/en/blog/no-clearfix/
[/quote]

Clearfix is ok when it’s appropriate but most of the time there are other better methods that can be used as already discussed.

The author of that article recommends that overflow: auto be used instead which is fine if you don’t need visible overflow. Indeed the overflow method was actually invented by me many years ago and if you follow the links in that article you will eventually see that the method was attributed to me many many years ago. So while you may go off searching around the internet you have arrived at information that was actually first described here at Sitepoint :slight_smile:

https://www.456bereastreet.com/archive/200502/simple_clearing_of_floats/


#38

What’s the difference between these?

overflow: auto;

overflow: hidden;

Update: found this:


#39

Trying to get clear to work.

I’m not understanding how to use it.

I can’t get it.

ok, so I removed height:
https://jsfiddle.net/8aebp5zt/120/

.container {
  width:936px;
  clear: both;	
  margin:100px auto;
  background:green;
}

Like this:

.container-left,
.container-right {
  clear: both;
}

#40

I[quote=“asasass, post:39, topic:308660”]
Like this:
[/quote]

No.

Please read the documentation again.

Clearfix is clearly described in detail all over the web. You do not apply it to the floats you apply it to the parent container of the floats using the content property on a pseudo element I.e. :after.

I can’t post any code as I’m on a mobile at the moment.


#41

Would I be correct in saying that this type of code, the way I have it set up, it doesn’t need
overflow:hidden ?

https://jsfiddle.net/fgo83ape/11/


.jacketc {
  position: relative;
  width: 266px;
  height: 174px;
  background: #000000;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.jacketc,
.wrape {
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
}

.jacketc .linka {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.jacketc .linkb {
  fill: #0059dd;
}

.jacketc .lines::before,
.jacketc .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 168px;
  background: #0059dd;
}

.jacketc .lines::after {
  left: 177px;
}

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  background-position: 0 -168px;
}

.wrape .wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrape .wrapper li {
  margin: 0;
  padding: 0;
  float: left;
}

.wrape .wrapper li a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape .wrapper li a:hover {
  border: 3px solid #5c91dd;
}

.wrape .wrapper li:nth-of-type(5n) a {
  margin-right: 0;
}

.wrape .wrapper li:nth-of-type(8) a {
  opacity: 0;
  border: none;
  background: none;
}

.wrape .wrapper li:nth-of-type(7) a {
  border: 3px solid #0059dd;
  background: rgba(170, 0, 255, 0.5);
}

.wrape .wrapper li:nth-of-type(9) a {
  border: 3px solid #0059dd;
  background: rgba(29, 161, 242, 0.5);
}

.wrape .wrapper li:nth-of-type(10) a {
  border: 3px solid #0059dd;
  background: rgba(170, 255, 0, 0.5);
}

.wrape .wrapper li:nth-of-type(11) a {
  border: 3px solid #0059dd;
  background: rgba(255, 170, 0, 0.5);
}

.wrape .wrapper li:nth-of-type(12) a {
  border: 3px solid #0059dd;
  background: rgba(255, 0, 170, 0.5);
}

.wrape .wrapper li:nth-of-type(13) a {
  border: 3px solid #0059dd;
  background: rgba(44, 117, 255, 0.5);
}

.wrape .wrapper li:nth-of-type(14) a {
  border: 3px solid #0059dd;
  background: rgba(224, 17, 95, 0.5);
}

.wrape .wrapper li:nth-of-type(15) a {
  border: 3px solid #0059dd;
  background: rgba(243, 243, 21, 0.5);
}

.wrape .playButton {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, .7);
  cursor: pointer;
  fill: #e0115f;
}

.wrape .play,
.wrape .pause {
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  right: 0;
  margin: auto;
}

.wrape .pause {
  left: 0;
}

a {
  outline: 0;
}

.hide {
  display: none;
}

#42

No, we gave discussed this before on this exact same issue.

Add some text after your element and see where it sits.

</div>
hello
</body>

Then add overflow:hidden and see where it sits?

We discussed the exact same issue at length last year and although you have given your container a height the floats have not been contained and following content will try and wrap to the side. There is also the issue of the 12px bottom margin on your bottom row of floats to consider.

Whether or not this an issue or not depends on what comes next (as I always say). If you have nothing else on that page then the errors will not be noticed. However if you start adding more content then you may get the problem mentioned above depending on what exactly comes next.

A robust approach doesn’t care what comes next and will work whether code is changed or not so you should always take care to contain your floats in one way or another. Of course containing the floats may make you control other issues such as margins a little better but that s the job of a good developer in leaving as little to chance as possible.

Please refer to thread where this was discussed originally for more thorough answers.


#43

There are 2 elements in this, right, or only 1?

How do you test the ones that have jackets on them?

The text isn’t removing, did I do something wrong?
https://jsfiddle.net/fgo83ape/14/

Did I put it in the wrong spot?
image

.jacketc,
.wrape {
  overflow: hidden;
}

  <div class="lines"></div>

</div>
hello
      </path>
    </svg>
  </div>
  hello
</div>

Because the color isn’t going over it’s border, doesn’t that mean, overflow isn’t needed?
https://jsfiddle.net/fgo83ape/16/

image