Floating a div next to css grid

Question

I am trying to float a div to the side of a CSS grid I have laid out. However, it keeps getting pushed below the grid. I have tried both float and inline-block with no success.

What I want:

What I'm getting:

The html:

<div class="body-wrapper">

    <div class="grid-wrapper">
    
        <div class="logo"><img src="Logo.png" alt="ChessHero.io Logo" width="300" height="300"></div>
        <div class="title"><h1>TITLE</h1></div>
        <div class="menu"></div>
        <div class="image"><h1>IMAGE</h1></div>
        <div class="feature"><h1>FEATURE</h1></div>
        <div class="padding"></div>

    </div>
    
    <div class="menu-div">TEST</div>
    
</div>

The stylesheet:

body, html {
   height: 130%;
   width: 100%;
   margin: 0px;
   padding: 0px;
}

.body-wrapper {

    float:left;
    overflow:hidden;
}

.grid-wrapper {
    display: grid;
    grid-template: .5fr .5fr 2fr 2fr /repeat(10, 1fr);
    grid-template-areas: 
    "l l t t t t t t m m" 
    "p p i i i i i i m m"
    "p p i i i i i i m m" 
    "p p f f f f f f m m";

    grid-gap: 3px;
    float:left;
}

.menu-div{

   height:100vh;
   width:10%;
   background-color:green;
   float:left;
}

Pages I've read & tried:

CSS two divs next to each other

How to place two divs next to each other?

How do I align spans or divs horizontally?

Any help is much appreciated.

Because I want the most-right column(in this case, a div) to be position:fixed. I can't do that if its another column in the grid as it destroys the grid's flow. — Matthew, Apr 08 '21 at 18:38

Josh Regev · Accepted Answer · 2021-04-09T17:53:31.790

There is no space for the div on the right, because the grid takes up 100% width by default. That's why it goes underneath. If you set a width for the grid that will leave enough space, then the other div will float next to it.

However, you said you want to use position:fixed, and that is not compatible with float anyway. So just add position:fixed; top:0; right:0; and it will stick to the top right. Then you can remove the float from the grid (and wrapper), and reduce the width of the grid so it won't overlap with the fixed div.

Floating a div next to css grid

1 Answers1