Floating left and right

Discussion in 'CSS' started by astralis, Feb 22, 2006.

  1. #1
    I think floating elements is very difficult that I keep wanting to just use tables, but I want to try CSS.

    The following places two elements beside each other but in IE they are on top of each other. Why and how can I make them stay beside each other?

    
    <style>
    <!--
    #login .loginform
    {
    border-top:1px dashed #ccc;
    border-bottom:1px dashed #ccc;
    background-color:#FFFAE8;
    padding:10px;
    margin:0px;
    position:absolute;
    width:520px;
    }
    #login fieldset {
    border:1px solid #fff;
    padding:10px;
    margin:0px;
    }
    -->
    </style>
    
    <div id="login">
    <div class="loginform">
      <p>
    <div class="csh">Choose your posting method</div>
    <fieldset style="float:Left; margin-right:5px; text-align:left"><legend>Login or register to track your comments</legend><form method="post" action="inc_login.asp" name="loginForm">
      <input type="hidden" name="loginaction" value="1">
      <input type="hidden" name="redir" value="#commentstop">
      <div>
    <fieldset>Username:</fieldset><input name="username" type="text" value="" size="10"><fieldset>Password:</fieldset><input name="password" type="password" value="" size="10"><fieldset><input type="checkbox" name="rememberMe" id="rememberMe" value="True" class="altInput"></fieldset><label for="rememberMe"> Remember me</label><div><a href="register.asp?redir=http%3A%2F%2F63%2E134%2E233%2E5%2Farticle%2Easp%3Fid%3D2391%26idcategory%3D30%26idsub%3D157%23commentstop">Register</a>  |  <a href="lostpw.asp">Forgot your password?</a></div><div><input type="submit" name="submitBtn" value="Login"></div></div>
    </form></fieldset>
    
       <form method="post" name="BlogForm" action="comment.asp">
     <input type="hidden" name="FORM_TO_PREVIEW" value="Comment">
          <fieldset style="float:right; margin-left:5px; text-align:left"><legend>Post anonymously</legend>
    <fieldset class="csh">Name: *</fieldset>
      <input name="a_comment_name" type="text" size="20" maxlength="50" value="">
     <fieldset class="csh">Email:</fieldset><input name="a_comment_email" type="text" size="20" maxlength="50" value="">
    <fieldset class="csh">URL:</fieldset>
      <input name="a_comment_url" type="text" size="20" maxlength="50" value=""></fieldset></p>
    </div>
    </div>
    
    Code (markup):

     
    astralis, Feb 22, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    You might first get your html right. Put the fieldsets in the form.
    
    <form ...>
      <fieldset>
        <legend>...</legend>
        <label for="...">user<input type="..." id="..."></label>
        <label for="...">password<input type="password" id="..."></label> 
      </fieldset>
      <fieldset>
        <legend>...</legend>
         ...
      </fieldset> 
    </form>
    Code (markup):
    It looks like you may have overdone the use of fieldsets :).

    cheers,

    gary
     
    kk5st, Feb 22, 2006 IP