Why, when I zoom out - link 9 link 10 link 11 link 12 creep down, and how can I fix it?

and I also wanted to limit the canvas. so that its vertical size is scaled, and not stretched to the whole country

body { background: #333333; color: #000000; font-family: Trebuchet MS, Arial, Times New Roman; font-size: 12px; } table {border-spacing: 7px 11px; border:0px; } td { padding: 10px; border-radius: 20px; cursor: pointer; text-decoration: none; padding: 10px 20px; color: #ffffff; background-color: #0095ff; border: 0px solid #0095ff; } a { white-space: nowrap; display: block; width: 100%; height: 100%; text-decoration: none; vertical-align: middle; text-align: center; color: #ffffff; font-size: 2vw; } canvas{ color: #ff55ff; background-color: #001100; float: left; width: 67%; height: 100%; margin: 1%; border-radius:10px; border: 0px solid #333333; } #TOPmenu{width: 100%;} #Lmenu{width: 12%; float:left; margin: 1%;} #Rmenu{width: 12%; float:right;margin: 1%;} 
 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="unico.css" /> </head> <table id="TOPmenu" width="500"> <tr> <td><a href="1">ссылка 1</a></td> <td><a href="2">ссылка 2</a></td> <td><a href="3">ссылка 3</a></td> <td><a href="4">ссылка 4</a></td> </tr> </table> <div id="menu"> <table id="Lmenu" width="500" border=1> <tr> <tr><td><a href="1">ссылка 5</a></td></tr> <tr><td><a href="2">ссылка 6</a></td></tr> <tr><td><a href="3">ссылка 7</a></td></tr> <tr><td><a href="4">ссылка 8</a></td></tr> </tr> </table> <canvas id="canvas" width="500" height="500" ;></canvas> <table id="Rmenu" width="500" border=1> <tr> <tr><td><a href="1">ссылка 9</a></td></tr> <tr><td><a href="2">ссылка 10</a></td></tr> <tr><td><a href="3">ссылка 11</a></td></tr> <tr><td><a href="4">ссылка 12</a></td></tr> </tr> </table> </div> </body> </html>

    2 answers 2

    id = "Rmenu" - your alignment is oriented to the right, and if it doesn’t fit, it will slide down and align to the right, respectively. float: right ;.
    Forget about the float, so no longer typeset, use display: inline-block or inline-flex, inline, they will line the objects.
    canvas at you is pulled out width: 67%; in html the width prevails over the height, set a fixed width in px, then the nested canvas will stretch it in height, and the width will be unchanged.

    • Yuri, you are almost always right. Added the answer to your answer - Yuri
    • in your code Yuri - font-size: 2vw; vw is not good to use for a font, em is better, since vw depends on the width of the browser window, and em is less susceptible from the parent block and less susceptible to increasing or decreasing - Yuri
    • Yuri, let him fix it already. I answered his question - Yuri

    And do not use more table, please

     body { background: #333333; color: #000000; font-family: Trebuchet MS, Arial, Times New Roman; font-size: 12px; } table {border-spacing: 7px 11px; border:0px; } td { padding: 10px; border-radius: 20px; cursor: pointer; text-decoration: none; padding: 10px 20px; color: #ffffff; background-color: #0095ff; border: 0px solid #0095ff; } a { white-space: nowrap; display: block; width: 100%; height: 100%; text-decoration: none; vertical-align: middle; text-align: center; color: #ffffff; font-size: 2vw; } /* Добавляем это */ #menu { display: flex; width: 100%; } /* Меняем тут */ canvas { color: #ff55ff; background-color: #001100; height: 100%; margin: 1%; border-radius:10px; border: 0px solid #333333; flex-grow: 1; /* Ещё добавляем это */ } #TOPmenu{width: 100%;} #Lmenu{display: block; margin: 1%;} /* Изменяем это */ #Rmenu{display: block; margin: 1%;} /* И это */ 
     <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="unico.css" /> </head> <table id="TOPmenu" width="500"> <tr> <td><a href="1">ссылка 1</a></td> <td><a href="2">ссылка 2</a></td> <td><a href="3">ссылка 3</a></td> <td><a href="4">ссылка 4</a></td> </tr> </table> <div id="menu"> <table id="Lmenu" width="500" border=1> <tr> <tr><td><a href="1">ссылка 5</a></td></tr> <tr><td><a href="2">ссылка 6</a></td></tr> <tr><td><a href="3">ссылка 7</a></td></tr> <tr><td><a href="4">ссылка 8</a></td></tr> </tr> </table> <canvas id="canvas" height="500" ;></canvas> <table id="Rmenu" width="500" border=1> <tr> <tr><td><a href="1">ссылка 9</a></td></tr> <tr><td><a href="2">ссылка 10</a></td></tr> <tr><td><a href="3">ссылка 11</a></td></tr> <tr><td><a href="4">ссылка 12</a></td></tr> </tr> </table> </div> </body> </html>