#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    1
    Rep Power
    0

    Vertical stacking my floating divs?


    Hi. I've always been harped at to avoid tables and use DIVs instead. I started a new project today and figured I'd take a stab. I want a basic user login data collection. Normally I'd do a 2x2 table so the text input fields line up. Instead, I did this:

    Code:
    <div style='float: left;'>Username:</div>
    <div style='float: left;'><input type=text name=user></div>
    <BR>
    <div style='float: left;'>Password:</div>
    <div style='float: left;'><input type=password name=pwd></div>
    The BR isn't dropping the next DIV down/left, just down. How do I get the password DIVs to line up with the first ones, just down a line?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    Just briefly, I'll say your labels should be in <label> tags and that you don't necessarily need to wrap your input fields in their own div.

    But with your current setup, you could do it all sorts of ways.

    You could put everything in a parent element and set the width so it wraps.
    You could put the two divs in a parent and set the parent to overflow: hidden.
    You could assign a class to every input div and set a :after with a style of clear: left (google search for clear floats without markup)
    You could insert a clearing div (with a style of clear: left)
    You could use a label tag and wrap the label and and the input, and give it a style of display: block.
    And so on.

    One quick n' dirty option:

    Code:
    CSS:
    label {width: 100px; display: inline-block;}
    input {margin-bottom: 5px}
    
    HTML:
    <div>
      <label for="user">User name</label>
      <input type="text" name="user" id="user" />
    </div>
    <div>
      <label for="pwd">Password</label>
      <input type="password" name="pwd" id="pwd" />
    </div>
    Last edited by rdoyle720; November 14th, 2012 at 12:14 PM.

IMN logo majestic logo threadwatch logo seochat tools logo