CODEWITHSUNDEEP
htmlcss
Damien
Damien

Reputation: 4319

CSS float for HTML5 not floating video elements in div container

I'm trying to build a full width HTML5 video slider/carousel thing. I've scoured the web and can't find one so I figured I'll try to make one my self.

Already I'm experiencing issues where it should be simple. I'm trying to float the videos next to each other so I could slide them in. For some reason, my videos don't want to listen to me. Here's my code.

css

.slider{
    list-style: none;
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider .slide{
    float: left;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0px;
    overflow: hidden;
    opacity: 0.15;
    width: 100%;
    cursor: pointer;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}

.slider .slide.active{
    opacity: 1;
    cursor: default;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}

html - 5 slides in the mix

<div class="slider">

    <div class="slide active">
        <a href="/1.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/trucks-driving.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/2.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/money-moving.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/3.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/trucks-driving.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/4.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/globe-spinning.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/5.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/arrow-target.mp4" type="video/mp4">
            </video>
        </a>
    </div>

</div><!-- slider -->

Upvotes: 0

Views: 540

Answers (1)

PIIANTOM
PIIANTOM

Reputation: 1391

The position of floating elements is related to the space (width) provided by the parent. In your case, they both have the same width (100%). This explains the line break.

To avoid line breaks, the right CSS property to use is word-break: keep-all; But this can not work with floating elements.

Best solution is to used display: inline-block property for .slide, and white-space: nowrap; for .slider

Major problem of inline-block is the additional space triggered usually by HTML code indentation itself. One good solution is to add a font-size: 0 to the parent. In your case, this should not be a problem as you display videos.

CSS

.slider{
    list-style: none;
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

.slider .slide{
    display: inline-block;
    margin: 0;
    padding: 0;
    border-radius: 0px;
    overflow: hidden;
    opacity: 0.15;
    width: 100%;
    cursor: pointer;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}

.slider .slide.active{
    opacity: 1;
    cursor: default;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}

Upvotes: 2

Related Questions