Pushing two floats together inside a div

HTML & CSS
1

Is this how it would be written, to push two floats together?

With padding it goes all the way up to 41px right next to each other.

.container-top {
  position: relative;
  height: 310px;
  padding: 0 20px;
}

Margin breaks up after 20px.
This way wouldn’t work then.

.container-left-video,
.container-right-video {
  margin: 0 20px;
  background: blue;
}
2

Or you can place your margins according with the float directions.

.container-left-video,
.container-right-video {
  background: blue;
}

.container-left-video {
  float: left;
  margin-left: 30px;
}

.container-right-video {
  float: right;
  margin-right:30px;
}

You were setting a margin on each side of the float with margin: 0 20px;

1 Like
3

Adding it twice is much better

.container-left-video {
  float: left;
  margin-left: 20px;
}

.container-left-video {
  float: right;
  margin-right: 20px;
}

Than adding it 4 times.
How I originally had it set up

Once for the cover
Than for the video.

.container-left-video .jacket-left {
  margin-left: 20px;
}

.container-right-video .wrap-left {
  margin-left: 20px;
}

.container-left-video .jacket-right {
  margin-right: 20px;
}

.container-right-video .wrap-right {
  margin-right: 20px;
}

But the cover is going to be shrunk down though, and so it’s going to go back to having to input it 4 times again.

See:
https://jsfiddle.net/nL84mtxr/1/

The reason why I made the cover full-size was to use as a template to calculate the left and right margins. How far away to place the 80 x 80 squares.

In this case.

margin-left: 183px;
margin-right: 183px;

4

It could be written like this too, but this way seems too confusing to understand.


.container-right-video,
.container-left-video {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.container-left-video {
  left: 20px;
  background:blue;
}

.container-right-video {
  right: 20px;
  background:red;
}
5

Here is a pretty simple script that you could continue to modify.

<!doctype html>
<html lang="en">

<head>
    <title>align Flex</title>
    <meta charset="utf-8">
    <style>
        .lr {
            width: 50%;
            margin-bottom: 0.5em;
            padding: 0.5em;
            border: 1px solid black;
            display: flex;
            justify-content: space-between;
        }
    </style>

</head>

<body>
    <div>
        <div class="lr"><span>Description 1</span><img src="https://www.nova.edu/portal/optometry/otm/pics/4fun/11.jpg"></div>
        <div class="lr"><span>Description 21</span><img src="https://www.nova.edu/portal/optometry/otm/pics/4fun/12.jpg"></span></div>
        <div class="lr"><span>Description 321</span><img src="https://www.nova.edu/portal/optometry/otm/pics/4fun/13.jpg"></div>
    </div>
</body>

</html>
6

I’m not sure how this helps the OP @jmrker. He is using floats and you are using flex.

7

I don’t know if it helps the OP either.
I was just suggesting a newer solution than the older float design.

8

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