Quiero poner un menú a la izquierda que sea independiente de lo que está a su derecha

Lo que quiero es un menú a la izquierda y que a su derecha aparezca un chiste. He creado un menú con varios items y lo que hace es bajar el chiste tanto como opciones(items) tiene el menú y quiero que sea independiente( que el menú pueda crecer o decrecer( tener más o menos cantidad de opciones) sin que afecten a la posición del chiste- Al poner el display:inline y float left, en vez de poner el DIV del menú a la izquierda y el cuerpo a su derecha(que es lo que quiero, pone las opciones del menú en línea .
Uso display: inline;
float: left;
pero debe ser que no lo pongo en el lugar correcto porque no lo consigo.
Muchas gracias. Adjunto código para que se pueda ver mejor mi intención

<!DOCTYPE HTML>
<html lang="es">
    <head>
        
        <title>chistesy humor, clasificados por categorias y ordenados por fecha de publicación</title>
        <meta charset="utf-8"> 
         <meta name="description" content="Chistes  y humor en español ">
         <style type="text/css">
            * {
                margin: 0;
                border: 0;
                padding: 0;
            }
             body {
              /*  background: rgba(38, 60, 154, 0.83);
                background-color: white;
                */
                background-color: black;
                
                
                font-family: sans-serif;
                font-size: 14pt;
            
            
            }
             menu{
                width: 20%;
                margin-top: 1080px;
                
                padding-left: 0px;
                height: 500px;
                background-color: white;
                 
                    display: inline;
        float: left;
                    
                   /*
                    display: flex; 
flex-direction: row;
       */
                
                
            }
             H1{
                  color: blue;
                font-size: 18pt;
              font-family: sans-serif;
                    
                
                }
      .recuadroexterno{
                    margin: 0 auto;
                  /*  padding-left: 40%;*/
                    margin-left: 15%;
                    
                    
                        
                    width: 50%;
                    height: 300px;
                    background-color: #baa37c;
                    -webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
                    
                    /*border- 10px 10px border-radius: 10px solid  black;
                    */
                                display: inline;
        float: left;
       
                 /*    display: flex; 
flex-direction: row;
                  */  
                    
                }
             .chiste{
                margin-left: 10%;
                
                 width: 40%;
              
                
                    height: 200px;
                    background-color: azure
                    border- 10px 10px border-radius: 10px solid  white;
                font-size: 18pt;
                color: antiquewhite;
                font-size: 18pt;
                font-weight: bold;
                
                
                
                    
                    
                
    ul li {
                list-style-type:none ;
                background-color:antiquewhite;
                width: 10%;
                margin: 1px;
               padding: 5px;
     /*  display: inline;
        float: left;
       */        
                font-family: sans-serif;
                font-style: 12pt;
                
                
               border-left: solid 4px #98d0ff;
                
            }                          
                    
                }
             a:hover {
                border-left: solid 1px #267b9a;
                color: #baa37c;
               background-color: #1d3c2b;      
                cursor:pointer;
                  border: solid 1px #baa37c; 
                      font-size: 16pt;
                     opacity: 1;
            }

             .publicado{
                font-family: sans-serif ;
                    font-size: 16 pt;
                font-weight: bold;
                color: yellow;
                
            }
            
            H2{
                 font-family: sans-serif;
                    font-size: 16 pt;
               
                   font-weight: bold;
               /* color: rgba(113, 9, 113, 0.97);
                */
                color: orange;
             
                
                
                
            }
             H3{
                 font-family: sans-serif;
                    font-size: 16 pt;
               
                   font-weight: bold;
                color: red;
             
                
                
                
            }
           
            
            p{
                
                color: white;
                
            }
           
            
            header{
              *    background: white;*/
            background-color: black;
                padding-top: 75px;
                
              
                width: 100%;
                height: 250px; 
                color: white;
                
            }
                      
            
            
                        
            
            
                 
            
           
          
          
            
                
              
                
                
                
            
                
                
                
      
             
             
  
            
                
                
                
            
            
            
        a:hover {
                border-left: solid 1px #267b9a;
                color: #baa37c;
               background-color: #1d3c2b;      
                cursor:pointer;
                  border: solid 1px #267b9a; 
                      font-size: 16pt;
                        
            }
  ol
            
            .limpiar{
                
                 clear: both;
            }
          
            img{
                      display: inline;
                float: left;
          
            }

            
      </head>  
       

        </style>
        <header>
            <div   class= "sonrisa">
            <img src="images/sonrisa.jpg" width="150px" alt="Dibuja tu mejor sonrisa con estos chistes">
                 <h2> Dibuja  tu mejor sonrisa con estos chistes</h2>
           
            </div>
            
                 <div   class="limpiar"></div>
            
    
               <H1> Chistes, Gracias y Humor para  provocar risas y mejorar el estado de ánimo . <br> Toma un chute de dopamina gratis <br>Antidepresivo Natural
                
            </H1>
             <p> Está denostrado científicamente que la risa es uno de los mejores generadores de felicidad  y de substancias en nuestro cuerpo que fomentan nuestro bienestar y mejoran el estado de ánimo, además de ejercitar el corazón y los pulmones</p>
           
            
            <h2> Aquí te dejamos muchos chistes clasificados por temas <br> y ordenados por fecha de publicación</h2>
                    
        
      </header>    
    <body>
        
        
      
                

            
            
        <div class="menu">
            
            
           <br>  <br>   <H3>CHISTES DE:</H3>
            <br><br>
            
            <ul>
                <li><a href="http://www.bing.com/" target="_blank">Bing</a></li>
                <li><a href="http://www.google.com/" target="_blank">Google</a></li>
                
                <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
             <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
             <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
             <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
             <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
             <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
             <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
             <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
             
            </ul>
            
            
            
            
            
          </div>
            
            
   
          <article class="recuadroexterno">
                <span   class= "publicado">Fecha Publicación: 03/01/2023</span>
             <span   class= "titulo">  <a href="luz automatica.html"luz%20automatica.html><H2> Luz automática</H2> </a>
               <span   class= "Chiste">LLega  el marido completamente borracho y  dice a su mujer al irse para cama:
- Me ha pasado algo increíble. He ido al baño y al abrir la puerta se ha encendido la luz automáticamente, sin hacer nada. <br>
                   
+ ¡La madre que te parió!, ¡Te mato!, ya te has vuelto a mear en la nevera.
</span>
              
              
               <H3>Categorías del Chiste:<br> 
                    <a href="#">Cortos</a> <a href="#">,Malos</a> 
                   <a href="#">Borrachos</a> <a href="#">,Matrimonios</a></H3>
               
                
              
            
     
        
              </span>    
     </article>
              
    
       
    
    
    <div class="clear:both;"></div>
       
    
   
</body>        
    
</html>

Hola.

Para empezar:

1.- Añade un punto delante de la regla de estilo del menú.

Tu tienes:

             menu{
                width: 20%;
                margin-top: 1080px;
               ...

Deberías tener:

             .menu{
                width: 20%;
                margin-top: 1080px;
                ...

2.- Deberías revisar la maquetación del sitio para que no se superpongan las cosas.

Saludos.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.