CODEWITHSUNDEEP
htmlcss
Stanimirovv
Stanimirovv

Reputation: 3172

Styling a form with css3

Basically I want to create a form which will have all the text in one "column" and all the input fields in another, so it looks decent. It almost works, the problem is that when I make a new line, the line continues from the width of the previous one. I will post the source code below:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .asd {       
            width: 100px;
            height: 50px;
             float:left;
        }
        .op {
        float:left
        }
    </style>
</head>
<body>
    <form action="demo_form.asp" autocomplete="on">
  <div class="asd">First name:</div><input type="text" name="fname" class="op"><br />
  <div class="asd">Last name:</div> <input type="text" name="lname" class="op"><br />
  E-mail: <input type="email" name="email" autocomplete="off"><br />
  <input type="submit">
</form>
</body>
</html>

Upvotes: 1

Views: 106

Answers (4)

Jason Lydon
Jason Lydon

Reputation: 7190

1) Clean up the html by using form html elements
2) Simplify the css
3) Enjoy

JSFiddle: http://jsfiddle.net/Bushwazi/XHtUL/

HTML:

<form action="demo_form.asp" autocomplete="on">
    <fieldset>
        <label for="fname">First name:</label>
        <input type="text" name="fname" class="op">
    </fieldset>
    <fieldset>
        <label for="lname">Last name:</label>
        <input type="text" name="lname">
    </fieldset>
    <fieldset>
        <label for="email">E-mail:</label>
        <input type="email" name="email" autocomplete="off">
    </fieldset>
    <input type="submit">
</form>

CSS:

form {
    width:100%;
}
fieldset {
    width:100%;
    display:block;
    padding:0.5em 0;
    border:none;
}
label {
    display:inline-block;
    width:40%;
    padding:0 5%;
}
input[type=text],
input[type=email] {
    height:100%;
    width:45%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}
input[type=submit] {
    float:right;
    margin:0 5% 0 0;
}

Upvotes: 1

Ms. Nobody
Ms. Nobody

Reputation: 1219

I think you don't need any height there. Just put whole line in div and float the elements inside..

My DEMO: http://jsfiddle.net/goodfriend/pt4Ua/20/

HTML:

<form action="demo_form.asp" autocomplete="on">
   <div class="line"><span class="asd">First name:</span><input type="text" name="fname" /></div>
   <div class="line"><span class="asd">Last name:</span> <input type="text" name="lname"  /></div>
   <div class="line"><span class="asd">E-mail:</span> <input type="email" name="email" autocomplete="off"  /></div>
   <div class="line"><input type="submit" /></div>
</form>

CSS:

.asd {
    width: 100px;
    float:left;
}
.line {
    margin:7px;
    display:block;
}

Hope this helps a bit.

Upvotes: 1

Floremin
Floremin

Reputation: 4089

Instead of float: left; in your CSS, try using display: inline-block; on both of your classes.

Also, wrap the email label in the div tag, like you did for first/last name.

Upvotes: 1

Brian Stephens
Brian Stephens

Reputation: 5271

You need to add an element with the style clear: both after each line. That will reset the floating position so the next elements will be positioned all the way to the left.

Upvotes: 1

Related Questions