How can i style this so the div doesnt move

hoponhiggo · July 26, 2011

Hi

I have coded my page so it has a header, and then two 'container' divs side by side. This works fine on a larger screen res, but as soon as the res is lowered, the right div moves underneath the left div.

What am i doin wrong

Code below

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; background-color:#333; 
}
#container
{
width:350px;
float:left;
}

#tabbox
{
height:40px
}
#panel
{
background-color:#FFF;
height:300px;

}
.tab
{
background: #dedede;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
width: 80px;
float: right;
font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius: 4px 4px 0px 0px;
}
a
{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup
{
margin-left:8px;

}
.select
{
background-color:#FFF;

}
#loginbox
{
height:300px;
padding:10px;
}
#signupbox
{
height:300px;
padding:10px;
display:none;
}
#textcontainer
{
float:right;
width:500px;
color:white;
margin-left:50px;
margin-right:50px;
}
.h1
{
font-size:16px;
text-align:center;
padding:10px;
}
.h2
{
font-size:12px;
text-align:center;
padding:10px;
}
<body>
<div id="header">

  <div align="center"><img src="Images/Banner1.gif" width="252" height="140" alt="pwnedbokv4!" />
  
  </div>
</div>
<div style="margin:40px">
<div id="container">
<div id="tabbox">
<a href="#" id="signup" class="tab signup">Signup</a>
<a href="#" id="login" class="tab select">Login</a>
</div>
<div id="panel">
<div id="loginbox"><h1>Login</h1>
<form>
</form>
</div>
<div id="signupbox"><h1>Signup</h1>
<form>
</form>
</div>
</div>

</div>
<div id="textcontainer">
<div class="h1"></div>
<div class="h2"></div>
</div>
</div>
</body>

#container and #textcontainer are the two divs in question

ZulfadlyAshBurn · July 26, 2011

use percentage instead of pixels. that way it will automatically resize to browser res.

Sign In

How can i style this so the div doesnt move

Recommended Posts

hoponhiggo

Link to comment

Share on other sites

ZulfadlyAshBurn

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information