DIV help

Question

aaholland 0 Newbie Poster

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

html-css web-design

2 Contributors
1 Reply
127 Views
11 Hours Discussion Span
Latest Post 19 Years Ago Latest Post by Godfear1

Dani AI

Generated 9 Months Ago

Quick diagnosis: the layout is being driven by floated side columns while the main area is kept in normal flow with large left/right margins. When floats are not contained or when markup is accidentally closed in the wrong place the main block will drop below the floats. Other common culprits are missing DOCTYPE (quirks mode), unclosed or misnested tags, and width calculations that exceed the parent container (padding + border + width).

Practical steps that fix this reliably:

Add a proper HTML doctype so the browser uses the standard box model.
Validate the HTML to find unclosed or misnested tags (the wrapper should contain nav, main and side columns).
Make the parent that holds the floated columns establish a block-formatting context (contain the floats) instead of letting them escape. A simple, widely-compatible clearfix is:
```
.clearfix::after {
content: "";
display: table;
clear: both;
}
```
Apply that class to the wrapper, or set the wrapper to overflow: auto / overflow: hidden where appropriate.
Use box-sizing: border-box to avoid surprises when adding padding/borders to elements with a fixed width.
For modern layouts, prefer flexbox instead of floats; it avoids many float/clearing headaches and is simpler to reason about.

Debugging tips: give each column a temporary background color or border to see their actual boxes; inspect computed widths in DevTools; progressively comment out parts of the markup until the offending element is isolated.

Notes on the existing thread: ’s float-based suggestion will work once floats are contained and widths are consistent, but wrapping floats with a clearfix or using a flex container is a cleaner, more robust approach for the form layout. HTML validation via the W3C validator and the MDN guides on floats and flexbox are good next references: MDN: float, MDN: Flexbox basics, and W3C Validator.

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>