HTML and CSS RSS HTML and CSS RSS

DIV help

Reply

•
•
Join Date: Sep 2006
Posts: 8
Reputation: aaholland is an unknown quantity at this point 
Solved Threads: 0
aaholland's Avatar
aaholland aaholland is offline Offline
Newbie Poster

DIV help

 
0
  #1
Nov 3rd, 2006
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.

Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 46
Reputation: Godfear1 is an unknown quantity at this point 
Solved Threads: 3
Godfear1's Avatar
Godfear1 Godfear1 is offline Offline
Unverified User

Re: DIV help

 
0
  #2
Nov 3rd, 2006
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
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC