Search code examples
htmlcsscss-grid

Floating a div next to css grid

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: enter image description here

What I'm getting: enter image description here

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.

Solution

  • 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.