CODEWITHSUNDEEP
cssinputlabelhtml
Sino
Sino

Reputation: 990

Html/css aligning difficulty (label, input, span)

I was busy creating a standard for forms. My form is build up by div, label, input, span.

div class="formulier">
    <label for="gebruikersnaam">Gebruikersnaam</label>
    <input name="gebruikersnaam" type="text" class="disable_input"/>
    <span class="text_error" id="gebruikersnaam">Uw account is niet actief.</span>

    <label for="wachtwoord">Wachtwoord </label>
    <input name="wachtwoord" type="password" class="disable_input"/>
    <span class="text_error" id="wachtwoord">Gebruikersnaam en/of wachtwoord verkeerd.</span><
</div>

The CSS I got is:

.formulier{
float: left;
margin-right: 15px;
margin-bottom: 15px;

}

.formulier label{
display: block;
margin-bottom: 5px;
}

.formulier select,
.formulier textarea,
.formulier .input-file,
.formulier input[type="url"],
.formulier input[type="tel"],
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="search"],
.formulier input[type="password"] {
width: 200px;
    display: block;
    margin-bottom: 15px;
    padding-left: 5px;
    height: 18px;
    color:#333;
}

.text_error{
color:red;
font-size: 90%;
display: none;
 }

The problem I am encountering is that if an error occurs, i put the SPAN on display: inline-block to display it with jQuery. What happends is that the span comes below the INPUT.. And what I want is that it comes next to the input(right of it) instead of below.

I have tried a lot of things so if someone could help me out :)

Upvotes: 0

Views: 3385

Answers (1)

mr_lewjam
mr_lewjam

Reputation: 1190

remove display:block; from your second bunch of css rules, as when an element's display is block, it forces the next element to be below it...

.formulier select,
.formulier textarea,
.formulier .input-file,
.formulier input[type="url"],
.formulier input[type="tel"],
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="search"],
.formulier input[type="password"] {
width: 200px;
    /*display: block;*/
    margin-bottom: 15px;
    padding-left: 5px;
    height: 18px;
    color:#333;
}

heres a jsfiddle

Upvotes: 1

Related Questions