css float

HI,

I have the following code

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>

<link href="test.css" rel="stylesheet">

</head>

<body>
<table width="350" border="1" cellspacing="1" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<form id="form1" name="form1" method="post">
  <label for="textfield">Text Field:</label>
  <input type="text" name="textfield" id="textfield">
  <label for="email">Email:</label>
  <input type="email" name="email" id="email">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password">
</form>
<p>&nbsp;</p>
</body>
</html>

Open in new window


and for css
@charset "UTF-8";
/* CSS Document */
#form1{
	float:right'
}

Open in new window


I want the form appears to the right of the table
LVL 1
joyacv2Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Britt ThompsonConnect With a Mentor Sr. Systems EngineerCommented:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>

<link href="test.css" rel="stylesheet">
<style>
/* CSS Document */
#container { width:525px; margin: 10 auto 0 auto; }
#theTable { width:350px; float: left; }
#theForm{
	float:right;
	width:150px;
}
</style>
</head>

<body>
<div id="container">
<div id="theTable">
<table width="350" border="1" cellspacing="1" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table></div>
<div id="theForm">
<form id="form1" name="form1" method="post">
  <label for="textfield">Text Field:</label>
  <input type="text" name="textfield" id="textfield">
  <label for="email">Email:</label>
  <input type="email" name="email" id="email">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password">
</form>
</div>
<p>&nbsp;</p>
</div>
</body>
</html>

Open in new window

0
 
Britt ThompsonSr. Systems EngineerCommented:
you need to surround your table with a div and then you have to set the widths on the divs. If you don't set the widths it doesn't know where to float.
0
 
joyacv2Author Commented:
updated code, don't work

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>

<link href="test.css" rel="stylesheet">

</head>

<body>
<div width="300px">
<table width="350" border="1" cellspacing="1" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table></div>
<form id="form1" name="form1" method="post">
  <label for="textfield">Text Field:</label>
  <input type="text" name="textfield" id="textfield">
  <label for="email">Email:</label>
  <input type="email" name="email" id="email">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password">
</form>
<p>&nbsp;</p>
</body>
</html>

Open in new window

0
 
joyacv2Author Commented:
works perfect!!!!!!!!!!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.