How to prevent HTML element moving when resizing window?_问答_开发者

How to prevent HTML element moving when resizing window?

开发者 https://www.devze.com 2023-01-21 00:04 出处：网络

I have a simple php page, with the main content placed in a table which is centred. I want to place a menu which starts at the upper right corner. The code is like this:

相关专题：css php resize

I have a simple php page, with the main content placed in a table which is centred. I want to place a menu which starts at the upper right corner. The code is like this:

    echo "<table class=\"center\">";
    while($row= mysql_fetch_array($query))
    {
        echo "<tr>";
        echo "<td>";
        ... content...
        echo "</td>";
        echo "</tr>";
    }
    echo "</table>";

    echo "<table class=\"topRightTable\">";
    while($row= mysql_fetch_array($query2))
    {
   echo "<tr>";
    echo "<td>";
    ... content ...
    echo "</td>";
    echo "</tr>";
    }
    echo "</table>";

With this css:

    table.center 
    {
    margin-left: auto; 
     margin-right: auto;
    text-align: left;
    }

    table.topRightTable
    {
    position:absolute;
    top:50;
    right:50;
    }

    body
    {
    min-width: 600;
    }

This works fine, until the window resizes. Then the right menu will float along with the window, be positioned over other elements. How to avoid the menu item moving along with the window?

I have tried to set the min-width of the page to 600, and hoped this would prevent the right menu from moving fu开发者_Go百科rther, but with no luck.

The qustion is: how to prevent the right-menu-table from colliding with the center-table

The other answer is correct. Assuming you table's parent is body:

body, html{
    margin:0px;
    padding:0px;
    width:100%;
    min-width:600px;
}
table.center {
    margin-left: auto; 
    margin-right: auto;
    text-align: left;
}

table.topRightTable{
    float:right;
}

If the <body> is not the parent, change it to .parent{ min-width:600px;}

You've positioned the table absolute which means it won't be rendered in the same plane as other elements. If you want the table to stay position:absolute, make the other elements also positioned absolute and put all of them into a container that's positioned:relative with a set width. Or (even better) float the elements.