CODEWITHSUNDEEP
htmlcss
zSynopsis
zSynopsis

Reputation: 4854

Changing the positioning of elements using just css

I have a webform that has inputs wrapped in divs that look something like this

Name
tbFirstName  lblFirstName  tbLastName lblLastName

Here is the html markup for it

<div class="editor-label">
   <label>Name:</label>
</div>

<div class="editor-field">
<span>
    <input id="LastName" name="LastName" type="text" value="" />
    <label for="LastName">Last Name</label>
</span>
<span>
    <input id="FirstName" name="FirstName" type="text" value="" />
    <label for="FirstName">First Name</label>
</span>
</div>

I was wondering on how i could change the output to look like this instead using just css

Name
tbFirstName  tbLastName 
lblFirstName lblLastName

Thanks for any help.

Upvotes: 1

Views: 256

Answers (2)

user356808
user356808

Reputation:

I moved your labels before the inputs.

.editor-field span {float:left;}
.editor-field span label {display:block;}

Markup

<div class="editor-label">
   <label for="Certnum">Name:</label>
</div>

<div class="editor-field">
<span>
    <label for="Certnum">Last Name</label>
    <input id="LastName" name="LastName" type="text" value="" />
</span>
<span>
    <label for="Certnum">First Name</label>
    <input id="FirstName" name="FirstName" type="text" value="" />
</span>
</div>

Upvotes: 3

Tom
Tom

Reputation: 30698

.editor-field span {float: left; margin-right: 10px;} // the margin is optional
.editor-field input {display: block;}

Upvotes: 4

Related Questions