Maneuvering two blocks of codes side by side

HTML & CSS
105

How come table isn’t working here with floats?

Uneven, Not working.

.wraph {
  display: table;
}

Works:

.wraph {
  overflow: hidden;
}
106

It’s working fine with floats.

Isn’t your question about something completely different as to whether there are floats in place or not?

I think you are talking about hiding the corners which has nothing to do with the parent containing floats.

108

I got the wrong idea. I thought I could remove overflow hidden, from all the codes that use float and replace it with either ClearFix, or display: table.

It turns out, the only thing that’s one size fits all is overflow: hidden.
If that is used, nothing else is needed.

ClearFix

.container::after {
  content: "";
  display: table;
  clear: both;
}

still needs: overflow: hidden;
Because those are the iframe videos:
border-radius: 25px;

.wraph::after {
  content: "";
  display: table;
  clear: both;
}


.wrapc::after {
  content: "";
  display: table;
  clear: both;
}

.wrape::after {
  content: "";
  display: table;
  clear: both;
}

overflow: hidden

.container {
  overflow: hidden;
}

.wraph {
  overflow: hidden;
}

.wrapc {
  overflow: hidden;
}

.wrape {
  overflow: hidden;
}

Table


.container {
  display: table;
}

.wraph { // causes the image to be uneven.
  display: table;
}

.wrapc {
  display: table;
}

.wrape {
  display: table;
}
109

I have a question about Grid & Flex

These are empty in the CSS in both of them.
If I remove them from the html, everything will be all messed up on the page.

So technically, there’s just two div tags holding the left and right side together in the html without any guidance from the CSS. other than I think just the main parent container in the html keeping them together in their own spot.

Would those just stay in the html as is, and they should not be removed?

.container-left {}

.container-right {}

Grid

.container {
  display: grid;
  grid-gap: 64px;
  grid-template-columns: auto auto;
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  overflow: hidden;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-left {}

.container-right {}

Flex:

.container {
  display: flex;
  justify-content: space-between;
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-left {}

.container-right {}
110

If you mean the CSS rather than the html then yes you can remove the rules for them as long as you don’t have any styles you want applied to them.

All direct children of an element that is display:flex automatically become flex-items and their behaviour is mostly controlled from that parent (similarly in grid).

111

You could if you did not want it also to hide overflow as well. You seem to be confusing concepts. The first concept is containing floats and the second concept is hiding overflow – they are not the same thing. Many times you may want to contain floats but have visible overflow (as in a dropdown) so you couldn’t use overflow:hidden.

Overflow:hidden will contain floats but that was not its primary purpose which was to hide overflow. You can’t say that overflow:hidden is a replacement for clearfix or display:table as you are talking about different things.

There are various other elements that will contain floats also and the verbose answer is that any element that creates a new block formatting context will contain floated children. You will only know what these elements are by learning about them from the specs or tutorials or listening to what you’ve been told a number of times now on the forum :slight_smile:

1 Like
112

You wouldn’t use:
overflow:hidden;

With ClearFix

Because that wouldn’t make sense, right?

Wouldn’t that be duplicating the same effect twice.

113

I thought I answered that quite clearly above :slight_smile: . There would be no real need for clear fix and overflow hidden.

If you want to contain floats and don’t want to hide any overflow then clearfix is fine.

If you want to contain floats and want to hide overflow (whether or not you need to) then overflow hidden is fine.

You could use display:table to contain floats instead but of course it would not hide overflow and obviously changes the behaviour of the element.

In the end you use the most suitable property for the task in hand. If your requirements change then you have to review your choice based on your new requirements.

2 Likes
114

If you were to rate these from best to worst to use, what would you say?

Float:

.container {
  width: 936px;
  padding: 25px;
  overflow: hidden;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

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

.container-right {
  float: right;
}

Table:

.container {
  display: table;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

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

.container-right {
  padding: 0 0 0 64px;
}

Flex:
https://jsfiddle.net/skg6fcL2/16/

.container {
  display: flex;
  justify-content: space-between;
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

Grid
https://jsfiddle.net/skg6fcL2/18/

.container {
  display: grid;
  grid-gap: 64px;
  grid-template-columns: auto auto;
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  overflow: hidden;
  border: 2px solid #0059dd;
  background: #000000;
}
115

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.