Question

I got a <div> containing 2 <p>s:

#in .html file
<style type="text/css">
    div.box {
        position: relative;
        height: 30px;
    }
    div.box p#id1 {
        position: absolute;
        margin-left: 0px;
    }
    div.box p#id2 {
        position: absolute;
        margin-right: 0px;
    }
</style>
...
<div class="box">
    <p id="id1">ID1</p>
    <p id="id2">ID2</p>
</div>

When the browser’s view is maximized, it looks like this:

-------------------------------------------------------------
|                                                           |
|ID1                                                     ID2|
|                                                           |
-------------------------------------------------------------

when I zoom out the browser, it looks like this (which is not what I want it to be):

---------------------------------
|                               |
|ID1                         ID2|
|                               |
---------------------------------

When the browser zooms, the content on the right side (ID2) shifts away.
What I expected is that, when I zoom out the browser, the content on the right side should be left out, like this:

-------------------------------------------------------------
|                                                           |
|ID1                                                     ID2|
|                                                           |
-------------------------------------------------------------
-----------------------------------------------------------
|                                                         |
|ID1                                                     I|
|                                                         |
-----------------------------------------------------------
---------------------------------
|                               |
|ID1                            |
|                               |
---------------------------------

How to do it in Css?

PS
The only way I thought of to do the job is to set the <div> block’s width to an explicit number, but how can I know what the width should be, because the screens’ size are not the same as mine, right?

Answer 1

try this style element, it does what you want

    <style type="text/css">
        div.box {
            position: relative;
            height: 30px;
            min-width:400px;
        }
        div.box p#id1 {
            position: relative;
            margin-left: 0px;
            display:inline-block;
            float:left;
            clear:none;
        }
        div.box p#id2 {
            position: relative;
            margin-right: 0px;
            display:inline-block;
            float:right;
            clear:none;
        }
    </style>