Maneuvering two blocks of codes side by side


#44

Then this is how you test it then?

no overflow
Overflow:hidden;
image

Overflow Added:

.wrape {
  Overflow:hidden;
  
}

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

</div>
6546654

image


#45

Yes you can clearly see the difference now.

The problem is once again compounded by your repeated use of heights on containers instead of letting the content dictate the height (although in this case the fixed height is essentially cutting off the bottom margin so although your use of it is accidental it gives you the solution you wanted).

Knowing when and when not to use something is what learning is all about:)


#46

I will work on that next:

How do I fix this?
https://jsfiddle.net/g72cho6j/165/

Before:
image

After:
image


#47

There’s this issue, and the other one where the text jumps off to the element above it.
If you think that’s an issue.

This is what happens when I remove height.
https://jsfiddle.net/bwa3os2v/14/


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

Would I remove height from this too?

 .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;
    }

#48

https://jsfiddle.net/bwa3os2v/20/

I wasn’t able to remove the height from these.
Maybe you can.

When I tried removing the height, it was messing up everything.
Maybe there’s a right way to do it, but I wasn’t able to figure it out.

.jacketa {
      position: relative;
      width: 936px;
      height: 1121px;
      background: #000000;
      margin: 100px auto;
    }

    .wrapa {
      position: relative;
      width: 606px;
      height: 50px;
    }

  .wrapb {
      position: relative;
      width: 266px;
      height: 266px;
    }

    .jacketc {
      position: relative;
      width: 266px;
      height: 174px;
      background: #000000;
    }

    .wrapg {
      position: relative;
      width: 606px;
      height: 344px;
      background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
    }

    .jacketb {
      position: relative;
      width: 606px;
      height: 606px;
      background: #000000;
 
    }

    .wraph {
      position: relative;
      width: 606px;
      height: 606px;
      border: 3px solid red;
      box-sizing: border-box;
      background: url("https://i.imgur.com/DRbLg4R.png") no-repeat -3px -3px;
    }

I was able to remove the height from these:

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

    .wrapc {
      position: relative;
      width: 266px;
      /*height: 50px;*/
    }

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

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

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

Working on this one but it’s not working.

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


#49

You have the ‘hello’ text inside. wrape when it should be outside of the wrapper.


#51

1 or 2 is wrong?

1.)

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

        </div>
        hello
        <div class="wrape hide">

          <div class="wrapper">
            <ul>

2.)


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

#52

Shouldn’t the text be sitting at the bottom?

If I do this I get:

1.)

          <div class="lines"></div>
      hello
        </div>
  
        <div class="wrape hide">

          <div class="wrapper">
            <ul>

This:


#53

Fixed that text part:
https://jsfiddle.net/bwa3os2v/26/

What do I do about the height?

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

  .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;
    }

What would I be adjusting?

I don’t think it’s that though.


#54

I already explained that above and last year in detail when you first started floating these.

Without the height the margin on the bottom floats increases the wrappers height. You either remove the margins from the bottom floats or you set a height and hide the overflow. We went through this in detail the first time around and went through every combination so I’m loathe to repeat here again. :slight_smile:


#55

I already have overflow on it.

    .wrapa,
    .wrapb,
    .wrapc,
    .wrape,
    .wraph,
    .jacketa,
    .jacketb,
    .container {
      overflow: hidden;
    }

#56

Read my post again I explained what choices you have.


#57

You either remove the margins from the bottom floats.

That would be this?

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

That didn’t work, but I don’t understand what the right formula would be.

li:nth-child(n+11)

Targets the last 5 cubes:


#58

Got it:
https://jsfiddle.net/bwa3os2v/32/

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

#59

#48

Which ones of these can height be removed of?

Which ones do they need to stay on?

I don’t believe that same method works with these.

.jacketa {
      position: relative;
      width: 936px;
      height: 1121px;
      background: #000000;
      margin: 100px auto;
    }

    .wrapa {
      position: relative;
      width: 606px;
      height: 50px;
    }

  .wrapb {
      position: relative;
      width: 266px;
      height: 266px;
    }

    .jacketc {
      position: relative;
      width: 266px;
      height: 174px;
      background: #000000;
    }

#60

I would be removing height and adding padding to the others too, right?

Are you telling me to:

Remove height and add padding instead?

For this one?
https://jsfiddle.net/bwa3os2v/33/


   .wrapa {
      position: relative;
      width: 606px;
      /*height: 50px;*/
      padding-bottom:44px;
    }

#61

Like this?
https://jsfiddle.net/bwa3os2v/36/

    .jacketa {
      position: relative;
      width: 936px;
      padding-bottom: 600px;
      /*height: 1121px*/
      background: #000000;
      margin: 100px auto;
    }

And this:
https://jsfiddle.net/bwa3os2v/37/

  .wrapb {
      position: relative;
      width: 266px;
      /*height: 266px;*/
      padding-bottom:260px;
    }

    .wrapb::before {
      content: "";
      position: absolute;
      top: -3px;
      left: -3px;
      width: 266px;
      /*height: 266px;*/
       padding-bottom:260px;

https://jsfiddle.net/bwa3os2v/39/

    .jacketc {
      position: relative;
      width: 266px;
      /*height: 174px;*/
      padding-bottom:168px;
      background: #000000;
    }

https://jsfiddle.net/bwa3os2v/41/

.jacketb {
      position: relative;
      width: 606px;
      /*height: 606px;*/
      padding-bottom:600px;
      background: #000000;
    }

#62

Height is all removed from the containers:
https://jsfiddle.net/bwa3os2v/43/

Hello removed:
https://jsfiddle.net/bwa3os2v/44/


#63

Do you need to specify height for this to be 200px?

I noticed this with 2 of them:

I don’t believe that can be fixed with margin or padding.

It should be 200px, not 203.

Why is 1.) 203px
https://jsfiddle.net/bwa3os2v/84/

and 2.) 200px

1.)

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

image

2.)

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

image


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

    .wrapd .lines::after {
      left: 174px;
    }

#64

I was able to remove the height off of everything except for these.

How come?
https://jsfiddle.net/bwa3os2v/90/

  .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;
    }

    .wrapc {
      position: relative;
      /*width: 266px;*/
      height: 50px;
    }

What's the rule of thumb when using padding and box-border?