I've been facing a challenge while working on our company's website this morning. I have formatted the page into two cells, one on the right and one on the left. The cell on the right contains an image that is around 790 pixels wide. However, when I shrink the browser window to a certain point where it no longer fits, the entire cell jumps below the first cell. How can I prevent this from happening?
Code snippet...
xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Test
</title>
<link href="StyleSheet1.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2ODI4NzA2OWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFCUNoZWNrQm94MU+tEbqmFYLAUCuNpKlG5GJdxlTP" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKUzskuAuzRsusGAoznisYGAuzR9tkMAuzRirUFAoLk17sJArursYYIEh1rVMqwd3ohPqFy9J1P74IvCz4=" />
</div>
<div style = "padding-left:15%;">
<div class = "header">
<img src="images/logoclr.bmp" style="height:56px;width:253px;border-width:0px;" />
<input name="TextBox1" type="text" id="TextBox1" style="width:414px;" />
<input type="submit" name="Button1" value="Search" id="Button1" />
</div>
<br /><br /><br /><br /><br />
<div class="loginSide">
<div class = "internalBox">
Log On To Invoice Viewer
</div>
<br />
<span>Login ID:</span>
<br />
<input name="TextBox2" type="text" id="TextBox2" />
*<br />
<br />
<span id="Label1">Password</span>
<br />
<input name="TextBox3" type="text" id="TextBox3" />
*<br />
<br />
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
Remember my Login ID<br />
<br />
<div style="padding-left:20px;"><input type="submit" name="Button2" value="Login" id="Button2" /></div>
<br />
</div>
<div class = "imageSide">
<img src="images/1_back11.jpg" style="border-width:0px;" />
</div>
</div>
</form>
</body>
</html>
CSS:
body {
background-color:rgb(227,227,225);
font-family:Verdana;
font-size:.8em;
margin-left:auto;
}
.loginSide {
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:275px;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
.imageSide {
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:792px;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.internalBox {
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
background-color:rgb(54,113,109);
color:White;
}