float text beside navbar

Question

I used bootstrap to create a full screen vertically aligned navbar. The problem is the remaining html code doesn't show up beside the navbar, it doesn't show up at all, i tried using floats but it doesn't seem to fix the problem. Please what is wrong with my code

UPDATE: fiddle of the code

.nav a {
    color: white;
}

.nav {
    background-color: #221e47;
}

.nav a:hover,
.nav a:focus {
    color: #6f7589;
}

.container-width {
    width: 300px;
    position: absolute;
    float: left;
}

.content {
    z-index: -1;
    float: left;
}

.name-tag {
    font-family: serif;
    font-size: 20px;
    color: black;
}






    
    

    Admin

    


    

    
    



    
        
            Dashboard
            Users
            Coupons
            Settings
            Logout
        
    

    
        user name

user_10968134 · Answer

The navbar have width 300px and position absolute. If you want the content area not to stand under the navigation must be applied to this area margin-left. They are not needed z-index or float.

In order not to be stuck in the navigation, I added 20px and result is 320px from left side. For symmetry I added 20px from the right side

Replace class .content with this one:

.content {
    margin-left: 320px;
    margin-right: 20px;
}

user_14645596 · Answer

Make z-index: -1; of code you want to display beside simple

float text beside navbar

2 Answers