944,165 Members | Top Members by Rank

Ad:
Nov 3rd, 2006
0

DIV help

Expand Post »
What is wrong with this I can't get the margins to line up the Create an Account. The main part is showing up down below the left hand colum. I am so confused. I am new to div

[html]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
div.spacer {
clear: both;
}

div.row {
position:static;
clear: both;
padding-top: 2px;
}

div.row span.label {
float: left;
width: 150px;
text-align: right;
}

div.row span.formw {
float: left;
width: 50px;
text-align: left;
}

div#navcol {
padding: 10px;
width: 230px;
float: left;
}
div#main {
padding: 10px;
margin-left: 260px;
margin-right: 260px;
}
div#sidecol {
padding: 10px;
width: 250px;
float: right;
}
.style4 {font-size: small}


-->
</style>
</head>
<body>
<div align="left" style="width:1025px"><img src="top.jpg"><br />


<div id="navcol">
<div align="center" style="width:220px;border: 1px solid">
<div align="left"><strong>Already a Beadworks customer?
Login below. </strong>
</div>
</div>
<div align="left" style="width:220px">
<div align="left">
<p><br />
Your Email Address:<br />
<span class="formw">
<input name="text2" type="text" size="25" />
</span><br />
<br />
Your Password:

<span class="formw">
<input name="text3" type="text" size="25" />
</span>
</p>
</p>
<p><img src="signin.gif" width="65" height="25" /><br />
<span class="style4"><a href=".">Forgot your password</a>? </span><br />
</p>
</p>
</div>
</div>

</div>
</div>

<div id="sidecol">
<h4>Starboard Side Column</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
<li>Or bends with the remover to remove</li>
</ul>
</div>
<div id="main">
<strong>Create an Account</strong><br />
Dates to remeber? Addresses to keep? Orders to track?<br /> My Account keeps it all in one place. Take the<br /> first step to create an account.
<form>
<div class="row">
<span class="label">First Name* :</span><span class="formw">
<input name="text" type="text" size="25" />
</span></div>
<div class="row">
<span class="label">Last Name*:</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Title:</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Company*:</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Address*:</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">State*</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">State*:</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Zip Code* :</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Phone* :</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Email Address* :</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Re-Enter Email Address* :</span><span
class="formw">
<input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">* </span><span
class="formw">
Required Information</span>
</div>
<div class="spacer">
&nbsp;
</div>
</form>
We do not sell or share you information with anyone. <br />For more information, please see FAQs.
</div>


</body>
</html>[/html]
Last edited by tgreer; Nov 3rd, 2006 at 5:31 pm. Reason: Added missing code tags.
Similar Threads
Reputation Points: 19
Solved Threads: 0
Newbie Poster
aaholland is offline Offline
8 posts
since Sep 2006
Nov 3rd, 2006
0

Re: DIV help

This is what I would do:
1. set your login div width to auto.
2. Then, set the float property of your login div to left so that your content flows around it (style="width: auto; float:left".)
3. I would make your starboard side column div float right
4. I would make your Create an account (main) div float left also. This will keep it together.
5. I would set a margin of about 10px around your divs so they are not crowding.

Here's my result:
html Syntax (Toggle Plain Text)
  1. <div align="left" style="width:auto; float:left; margin:10px;">
  2. <img src="top.jpg" /><br />
  3. <div id="navcol">
  4. <div align="center" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
  5. width: 220px; border-bottom: 1px solid">
  6. <div align="left">
  7. <strong>Already a Beadworks customer? Login below. </strong>
  8. </div>
  9. </div>
  10. <div align="left" style="width: 220px">
  11. <div align="left">
  12. <p>
  13. <br />
  14. Your Email Address:<br />
  15. <span class="formw">
  16. <input name="text2" size="25" />
  17. </span>
  18. <br />
  19. <br />
  20. Your Password: <span class="formw">
  21. <input name="text3" size="25" />
  22. </span>
  23. </p>
  24. <p>
  25. </p>
  26. <p>
  27. <img height="25" src="signin.gif" width="65" /><br />
  28. <span class="style4"><a href=".">Forgot your password</a>? </span>
  29. <br />
  30. </p>
  31. <p>
  32. </p>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div id="sidecol" style="float:right; margin:10px;">
  38. <h4>
  39. Starboard Side Column</h4>
  40. <ul>
  41. <li>Let me not to the marriage of true minds </li>
  42. <li>Admit impediments; love is not love </li>
  43. <li>Which alters when it alteration finds </li>
  44. <li>Or bends with the remover to remove </li>
  45. </ul>
  46. </div>
  47. <div id="main" style="width:auto; float:left; margin:10px">
  48. <strong>Create an Account</strong><br />
  49. Dates to remeber? Addresses to keep? Orders to track?<br />
  50. My Account keeps it all in one place. Take the<br />
  51. first step to create an account.
  52. <form>
  53. <div class="row">
  54. <span class="label">First Name* :</span><span class="formw">
  55. <input name="text" size="25" />
  56. </span>
  57. </div>
  58. <div class="row">
  59. <span class="label">Last Name*:</span><span class="formw">
  60. <input size="25" /></span>
  61. </div>
  62. <div class="row">
  63. <span class="label">Title:</span><span class="formw">
  64. <input size="25" /></span>
  65. </div>
  66. <div class="row">
  67. <span class="label">Company*:</span><span class="formw">
  68. <input size="25" /></span>
  69. </div>
  70. <div class="row">
  71. <span class="label">Address*:</span><span class="formw">
  72. <input size="25" /></span>
  73. </div>
  74. <div class="row">
  75. <span class="label">State*</span><span class="formw">
  76. <input size="25" /></span>
  77. </div>
  78. <div class="row">
  79. <span class="label">State*:</span><span class="formw">
  80. <input size="25" /></span>
  81. </div>
  82. <div class="row">
  83. <span class="label">Zip Code* :</span><span class="formw">
  84. <input size="25" /></span>
  85. </div>
  86. <div class="row">
  87. <span class="label">Phone* :</span><span class="formw">
  88. <input size="25" /></span>
  89. </div>
  90. <div class="row">
  91. <span class="label">Email Address* :</span><span class="formw">
  92. <input size="25" /></span>
  93. </div>
  94. <div class="row">
  95. <span class="label">Re-Enter Email Address* :</span><span class="formw">
  96. <input size="25" /></span>
  97. </div>
  98. <div class="row">
  99. <span class="label">* </span><span class="formw">Required Information</span>
  100. </div>
  101. <div class="spacer">
  102. </div>
  103. </form>
  104. We do not sell or share you information with anyone.
  105. <br />
  106. For more information, please see FAQs.
  107. </div>
Last edited by Godfear1; Nov 3rd, 2006 at 4:54 pm. Reason: Formatting
Reputation Points: 12
Solved Threads: 3
Unverified User
Godfear1 is offline Offline
46 posts
since Oct 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: simple Question
Next Thread in HTML and CSS Forum Timeline: mozilla firefox problem with text in div tag





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC