CSS given and computed are different for float property

Question

I have given the float:left property in the css. But it is not getting applied. This is causing issues for my complete layout. Why is the float left not getting applied? Can anyone please explain this. How can I fix this? Thank you.

function openNav() {
        document.getElementsByClassName('sidenav')[0].style.width =  '20vw';
        document.getElementsByClassName('sidenav-fix-closebtn')[0].style.visibility = 'visible';
        document.getElementsByClassName('sidenav-fix-open-btn')[0].style.visibility = 'hidden';
    }

    function closeNav() {
        document.getElementsByClassName('sidenav')[0].style.width = 0
        document.getElementsByClassName('sidenav-fix-closebtn')[0].style.visibility = 'hidden';
        document.getElementsByClassName('sidenav-fix-open-btn')[0].style.visibility = 'visible';
    }

.sidenav-fix {
    float: left !important;    
    background-color: #EAEAEA;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    transition: 0.5s;
    min-width: 50px;
    display: block;
}

.sidenav-fix span {
    font-size: 40px;
    cursor: pointer;
    text-align: center;
}

.sidenav-fix-open-btn {
    text-align: center;
}

.sidenav-fix-text {
    opacity: 1;
    transform: translateY(50vh) rotate(-90deg);
    white-space: nowrap;
}

.sidenav-fix-close-box {
    font-size: 36px;
    text-align: center;
    position: fixed;
    bottom: 0;
}

.sidenav-fix-closebtn {
    color: #818181;
    text-decoration: none;
    visibility: hidden;
}

.sidenav {
    height: 100%;
    z-index: 1;
    top: 0;
    width: 0;
    background-color: #EAEAEA;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 30vh;
    float: left;
    
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #000000;
    transition: 0.5s;
}

<body>
    <div class="">
        <div class="sidenav-fix ">
            <div class="sidenav-fix-open-btn">
                <span onclick="openNav()">&#9776; </span>
            </div>
            <p class="sidenav-fix-text">ABCD</p>
            <div class="sidenav-fix-close-box">
                <a href="javascript:void(0)" class="sidenav-fix-closebtn" onclick="closeNav()">&times;</a>
            </div>
        </div>

        <div class="sidenav">
            <a href="#">HOME</a>
            <a href="#">PROJECTS</a>
            <a href="#">PEOPLE</a>
            <a href="#">CONTACT</a>
        </div>
        
    </div>
    </body>

Instead of negative voting, please correct my mistake. I'll delete the question if that is whats required. At least please comment on the negative voting.

As it is shown in the computed section, it is getting float:left properly. No other CSS is present before this. — Pardha.Saradhi, Mar 10 '18 at 20:23
Possible duplicate of [Float right and position absolute doesn't work together](https://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-together) — TylerH, Mar 10 '18 at 21:18

score 1 · Accepted Answer · answered Mar 10 '18 at 20:29

1

You have position:fixed and top:0 - this overrides the float property;

answered Mar 10 '18 at 20:29

Derpanel

329
2
7

CSS given and computed are different for float property

1 Answers1