CODEWITHSUNDEEP
htmlcss
Elliott
Elliott

Reputation: 3864

div overlaps on smaller screen resolution

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

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

Thanks for any advice.

Upvotes: 0

Views: 4189

Answers (2)

tiltos
tiltos

Reputation: 144

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.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191729

Try white-space: nowrap

Upvotes: 0

Related Questions