I'm having a floating problem.
I'm attempting to have 2 divs side by side - so I used float on one to keep it to the right.
This floated div has more content I want side by side, but I want some of that take up say 70% of the available space within the main floated div.
Chrome, FireFox, Safari all display it correctly - but IE breaks it completely forcing the main two divs to stack.
Here is the code:
I originally used a table within the form, but it didn't work either, and this seemed better so...
Any ideas? (besides IE is a piece !@#*!@*#)
I'm attempting to have 2 divs side by side - so I used float on one to keep it to the right.
This floated div has more content I want side by side, but I want some of that take up say 70% of the available space within the main floated div.
Chrome, FireFox, Safari all display it correctly - but IE breaks it completely forcing the main two divs to stack.
Here is the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<title>Example Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.container{ width: 860px; margin: 0 auto; border: 1px solid black; }
.existing{ float: right; border: 1px solid red; }
.new{ border: 1px solid green; }
</style>
</head>
<body>
<div class="container">
<div class="existing">
<div style="text-align: center;">Existing Users</div>
<p style="white-space: nowrap;">Please enter your e-mail address and password, then click the Continue button.</p>
<form action="?pg=login" method="post">
<div>
<div class="label" style="float: left;">E-mail</div>
<div style="width: 70%; float: right;"><input type="text" id="txtEmail" name="login_email" size="20" value="" /><br /><span style="font-size: 11px;color: #333333;font-family: arial,helvetica,sans-serif;">(e.g. yourname@yourcompany.com)</span></div>
</div>
</form>
</div>
<div class="new">
<div style="text-align: center;">New Users</div>
<p>If you don't already have an account, click here:</p>
<div><button type="button">Register</button></div>
</div>
</div>
</body>
</html>I originally used a table within the form, but it didn't work either, and this seemed better so...
Any ideas? (besides IE is a piece !@#*!@*#)