DIV help

Question

aaholland 0 Newbie Poster

17 Years Ago

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>
<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>

web-design

2 Contributors
1 Reply
112 Views
11 Hours Discussion Span
Latest Post 17 Years Ago Latest Post by Godfear1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Godfear1 0 Unverified User · Answer 1 · 2006-11-04T02:52:47+00:00

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:

<div align="left" style="width:auto; float:left; margin:10px;">
<img src="top.jpg" /><br />
<div id="navcol">
<div align="center" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
width: 220px; border-bottom: 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" size="25" />
</span>
<br />
<br />
Your Password: <span class="formw">
<input name="text3" size="25" />
</span>
</p>
<p>
</p>
<p>
<img height="25" src="signin.gif" width="65" /><br />
<span class="style4"><a href=".">Forgot your password</a>? </span>
<br />
</p>
<p>
</p>
</div>
</div>
</div>
</div>
<div id="sidecol" style="float:right; margin:10px;">
<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" style="width:auto; float:left; margin:10px">
<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" size="25" />
</span>
</div>
<div class="row">
<span class="label">Last Name*:</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">Title:</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">Company*:</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">Address*:</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">State*</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">State*:</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">Zip Code* :</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">Phone* :</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">Email Address* :</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">Re-Enter Email Address* :</span><span class="formw">
<input size="25" /></span>
</div>
<div class="row">
<span class="label">* </span><span class="formw">Required Information</span>
</div>
<div class="spacer">
</div>
</form>
We do not sell or share you information with anyone.
<br />
For more information, please see FAQs.
</div>