div overlaps on smaller screen resolution

Question

Hi I am having trouble getting a div to stay in place when the window is resized. It overlaps the content div when its made smaller.

#content
{
  width: 70%; 
  height: 800px;    
  margin-top: 50px;     
  margin-left: auto;
  margin-right: auto;
  background-color: #202020;
  padding: 30px;        
}

#login
{
  float: right;
  margin-right: 20px;
  margin-top: 50px;
  background-color: #4A4344;
  width: 200px;
  height: 220px;
  text-align: center;       
}

It's easier if I give a link for you to see yourself: Link

I tried to set the values to em and percentages but I cannot seem to get it working.

Thanks for any advice.

Answer 1

Try white-space: nowrap

Answer 2

This is because the content div's width is set to 70% of the browser's window, and will ignore the login div entirely. Try instead to float both the elements. If you set both element's css to float: right;, put the login before your content in the html, and remove the width property from the content's css, then it should view how you want it.