Maneuvering two blocks of codes side by side

If I Remove the height off this one it becomes:
254px;
.wrapc {

If I Remove the height off this one it becomes:
253px;
.wrapd {

If I Remove the height off this one it becomes:
255px;
.wrapf {

.wrapc {
image

.wrapd {
image

.wrapf {
image

With .wrapc I would remove the first height 50px?

Or would I remove the 2nd height 44px instead and keep the first?

What’s the difference, and which height can be removed?

image

.wrapc {
  position: relative;
  width: 266px;
  /*height: 50px;*/
  overflow: hidden;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
.wrapc .playButton {
  float: left;
  width: 83px;
  height: 44px;
  background:red;
}

Exclude C: But not my question I had about C

Only these two the height can’t be removed:

  .wrapf {
      position: relative;
      /*width: 266px;*/
      height: 251px;
      background: #000000 url("https://i.imgur.com/fOfpsiC.png") no-repeat 0 0;
    }

    .wrapd {
      position: relative;
      /*width: 266px;*/
      height: 200px;
    }

If I Remove the height off this one it becomes:
253px;
.wrapd {

If I Remove the height off this one it becomes:
255px;
.wrapf {

You can remove both the heights and let the content dictate the height as mentioned a 1000 times before. You’ve only added a height to fix the problem with the gap at the bottom caused by the svg. The svg is stacked on the baseline and leaves a gap underneath (just like the descenders in text).

Remove the 2 heights from the wrappers and set the svg to vertical-align:top to remove the gap at the bottom.

.wrapc svg{vertical-align:top}

The difference between inline and block elements has been explained to you many times and just like images you get a gap underneath them unless you control them. You learned this lesson many times already :slight_smile:

That messed everything up though.


.wrapc {
  position: relative;
  width: 266px;
  /*height: 50px;*/
  overflow: hidden;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapc .playButton {
  float: left;
  /*width: 83px;*/
  height: 44px;
}

.wrapc svg {
  vertical-align: top
}

It would do because you removed the width instead of the height!!!

1 Like

Got it thanks.


.wrapc {
  position: relative;
  width: 266px;
  /*height: 50px;*/
  overflow: hidden;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapc .playButton {
  float: left;
  width: 83px;
  /*height: 44px;*/
}

.wrapc svg {
  vertical-align: top;
}

I have a question about the table layout.

Is table and width needed on the container?

.container {
 /* display: table;
  width: 936px;*/
  margin: 100px auto;
  background: orange;
}


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

If the element is display table then it will shrink wrap its content and be as wide as it’s content allows. That means that it won’t automatically stretch to the bounds of its parent container. Therefore when you use display table you would usually set a width of 100% (or a specific px width if a fixed design but of course that should be avoided for responsive sites) to make it stretch full width unless of course you wanted it to fit its contents only.

You can remove the display property and the width but as your inner content is display table-cell then it makes sense to leave it as it is now and have the structure clearly defined rather than relying on the browser to create an anonymous display table box for you.

3 Likes

Thank you for this.

And thank you for this.
It helped me remove height from my other 2 codes.

.wrapc svg {
  vertical-align: top;
}
2 Likes

Wait a second, I had followed your instructions here.

I removed the margins from the bottom floats.

   .wrape .wrapper li:nth-of-type(n+11) a {
      margin: 0 4px 0 0;
    }

After that I removed
overflow: hidden; from it.

    .wrapa,
    .wrapb,
    .wrapc,
    /*.wrape*/
    .container {
      overflow: hidden;
    }

Why did this happen?

Before:
image

After I click on it:
image

That seems to be wrape and .wrapf and it happens because there was no overflow:hidden so floats are not contained.

You told me this though, so I thought I could remove the overflow:hidden;, and everything would be just fine as you said to pick one of of the two.

You either remove the margins from the bottom floats or you set a height and hide the overflow.

I think you are mixing your metaphors :slight_smile:

No I said the opposite:

i.e. overflow:hidden

The question was originally about height IIRC.

ok. I got it.

remove the margins
keep overflow: hidden;

or

use height
keep overflow:hidden;

1 Like

I have a quick question:

When removing height, and adding padding.

Should they be replaced with

padding-top, or padding bottom?

padding-top

padding-bottom

That makes no sense.

You are just swapping one fixed measurement for another so there is no difference in top or bottom padding and no added benefit instead of using a fixed height.

You would usually use the padding trick when dealing with percentages to creat an aspect ration container but you are not doing this here.

As I said before you really want to let your content dictate the height. e.g. if you have an image that is 500px tall there is no need to give a wrapper a height of 500px. Just let the content dictate the height. In most cases you won’t need a height unless its an image or iframe etc.

I was doing it all wrong there?

Then what would be the right way of doing it, I don’t understand.

I should put the height back on here because there makes no difference with padding?

I thought the object was to remove height from everything and give it padding instead.

.wrapa {
  position: relative;
  width: 606px;
  padding-top:44px;
 /* height :50px;*/
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}