How to display text outside of the box of <div></div>

Question

 <div class="signup">
    <div>Tenxian アカウントに必要な情報</div><br/>
    </div>
      <br/><br/><br/><br/><br/><br/>

     <div align="center">@2009 Tenxian      &nbsp;&nbsp;利用規約
    </div><br/>
    <div align="center"><a href="/en/bidding/index.php">Tenxian·English</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="/cn/bid/index.php">腾闲·中国</a></div><br/><br/>

The code of .signup is:

.signup {
    border: 1px solid #99CCFF;
    position: absolute;
    width: 700px;
    height:450px;
    left: 50px;
    right: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

}

The problem is that

@2009 Tenxian 利用規約

Tenxian·English 腾闲·中国

is displayed in the box of <div class="signup"></div>, how to display it out of the box of <div class="signup"></div>?

I want to display

@2009 Tenxian 利用規約

Tenxian·English 腾闲·中国

at the bottom of a web page and outside of the box of <div class="signup"></div> . How to do it?

 <div style="position:relative"><div align="center" >@2009 Tenxian      &nbsp;&nbsp;利用規約
</div><br/>
<div align="center"><a href="/en/bidding/index.php">Tenxian·English</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="/cn/bid/index.php">腾闲·中国</a></div><br/><br/>

</div>

does not work.

Answer 1

The problem is that your signup box is set to position:absolute. When you do this, the element is removed from the flow of the page.

The easiest solution is to simply not make it position:absolute. (If this is not possible, please revise your question so that more helpful answers can be posted.)

Your original code, simplified

<div class="signup">
  <div>Tenxian アカウントに必要な情報</div>
</div>

<div class="footer">@2009 Tenxian 利用規約</div>
<div class="footer"><a href="/en/bidding/index.php">Tenxian·English</a> <a href="/cn/bid/index.php">腾闲·中国</a></div>

---

.footer {
  text-align: center;
}

---

Note that my solution below does NOT require you to use this code. It works fine with your existing HTML markup. I'm posting this code so that future readers will be able to understand the markup more easily.

A possible solution

.signup {
  border: 1px solid #99CCFF;
  width: 700px;
  height: 450px;
  margin-left: 50px;
  margin-right: auto;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
}

This makes your signup box take up the proper amount of space in the flow of the page. Here are the changes:

• Remove position:absolute: This causes the signup box to display as a regular statically positioned box
• Change left and right to margin instead: When a block-level box is displayed statically, it does is not affected by top, left, and so on. Instead, we use margins to push the box over to where we want it to be.