How to prevent HTML element moving when resizing window?


Tags: php,css,resize

Problem :

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 further, but with no luck.

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



Solution :

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;}


    CSS Howto..

    How to get cropped image with gray/ sepia in my editor.?

    how to apply the css style only to child

    Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?

    How to force a button inside a div not to inherit the parent CSS?

    How to select “label for=list[]” in CSS?

    Angularjs hide and show according to screen size responsive

    How to make CSS animation not reverse after finishing? Example inside

    How to overide CSS style of a class using jquery? [closed]

    How to set border to 0 in this table

    CSS Sprites - How to leave Hover button in depressed state

    How to read property value of a DIV which is set by a CSS class?

    How can I force text to “normal” (not bold) using css?

    how to make a child div visible when clicking its parent div in pure css

    how to drag and drop css file in eclipse?

    How to do a full bleed background image that scales with resolution in css/javascript? [duplicate]

    CSS div element - how to show horizontal scroll bars only?

    CSS how to transition(with transform) a parent and child both, differently

    How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

    How can I control when my css transitions happen and when they don't?

    How to create a speech bubble in css?

    Superfish: How to keep sub menu open after it has been clicked

    How do front end devs bundle and minify files?

    How to alter ionic's nav-bar size?

    how i can change the CSS class on click of an element [closed]

    Can't show Combobox in table

    How to change background on hover for 2 elements using css

    Javascript: How do I check a css style and then change another css style?

    how to make the position of div is fixed even though it's empty?

    How to fit images into keeping the exact size of

    How do I use CSS to add a non-rectangular border around an image?