Position of

Question

I have this div with a "form"; I want to align the indicated div with the other div. I don't understand why I cant align the <div>, as you will see I have made the same position in the div but nothing

<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="iconos/usados/logo.png" type="image/png" sizes="16x16">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="formBase">
    <div id="nombre">
        <p id="pnombre">Nombre: </p><input type="text" id="nuser" name="nuser" placeholder="Nombre">
    </div>
    <div id="apellido">
        <p id="papellido">Apellidos: </p><input type="text" id="auser" name="auser" placeholder="Apellidos">
    </div>
    <div id="dni">
        <p id="pdni">DNI: </p><input type="text" id="adni" name="auser" placeholder="DNI">
    </div>

    <hr id="hr1">
<div>

css:

/*----------------Formulario------------------------*/
#formBase {
width: 60%;
height: 60%;
border-style: solid;
border-width: 2px;
border-color: black;
position: relative;
top: 20%;
left: 20%;
}
/*----------------Formulario Nombre------------------------*/
#pnombre {
display: inline;
font-size: 130%;
}

#nombre {
width: 30%;
position: relative;
top: 5%;
left: 10%;
}

#nuser {
width: 50%;
height: 7%;
}

#hr1 {
position: relative;
top: 20%;
}

/*----------------Formulario Apellido------------------------*/
#papellido {
display: inline;
font-size: 130%;
}

#apellido {
width: 30%;
position: relative;
top: 10%;
left: 9%;
}

#auser {
width: 50%;
height: 7%;
}

/*----------------Formulario DNI------------------------*/

#pdni {
display: inline;
font-size: 130%;
}

#dni {
width: 30%;
position: relative;
top: 10%;
left: 50%;

}

#adni {
width: 50%;
height: 7%;
}

Please learn how to use padding, margin, and proper CSS alignment to get your input elements lined up properly. Using relative positioning like this is like using a hammer to drive in a screw. Here is an answer to get you started: http://stackoverflow.com/a/23741073/2234742 — Maximillian Laumeister, May 30 '16 at 17:13

score 1 · Answer 1 · answered May 30 '16 at 17:09

1

Your id #dnihas the left property at 50% change it to 9% like all the other ones:

#dni {
    width: 30%;
    position: relative;
    top: 10%;
    left: 9%;
}

https://jsfiddle.net/61ke6sg5/

answered May 30 '16 at 17:09

Maxwelll

2,174
1
17
22

score 0 · Answer 2 · answered May 30 '16 at 17:55

Try the following codes and try to implement on your test.

Test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="SMS.css">
</head>
<body>
    <div id="MainDiv" name="MainDiv">
        <div id="DivHolder" name="DivHolder">
            <table border="0px">
                <tr>
                    <td><label>ID:</label></td>
                    <td><input type="text" id="TextId" name="TextId" placeholder="Enter ID" class="InputBox" /></td>
                </tr>
                <tr>
                    <td><label>Password:</label></td>
                    <td><input type="password" id="TextPassword" name="TextPassword" placeholder="Enter Password" class="InputBox" /></td>
                </tr>
                <tr>
                    <td><label>Age:</label></td>
                    <td><input type="number" id="TextAge" name="TextAge" placeholder="Select Age" class="InputBox" /></td>
                </tr>
            </table>
            <div id="HolderLine" name="HolderLine">&nbsp;</div>
        </div>
    </div>
</body>
</html>

SMS.css

@charset "utf-8";
/* Author : Madhu Bilas Shrestha */

html{
    text-align: center;
}
body {
    background-color: #333333;
    display: inline-block;
    margin: 0px;
    text-align: center;
}
div{
    border: none;
}
#MainDiv{
    height: 500px;
    width: 800px;
    background-color: azure;
}
#DivHolder{
    min-height: 150px;
    height: auto;
    width: 95%;
    background-color: aqua;
    float: left;
    text-align: left;
    margin: 10px;
    padding: 10px;
}
.InputBox{
    display: block;
    margin: 0;
    width: 375px;
    font-family: sans-serif;
    font-size: 12px;
    appearance: none;
    box-shadow: none;
    border-radius: 5px;
    padding: 7px;
    border: solid 5px #c9c9c9;
    transition: border 0.3s;
}
#HolderLine{
    background-color: #74D214;
    height: 2px;
    width: 98%;
    margin: 10px;
}

Hope this will help you.

Position of

2 Answers2