Простая форма CSS-макета

Question

У меня есть эта HTML-структура:

<form id="signUpForm" action="login.php" method="post">
    <h3>Please enter your details below:</h3>
    <br />

    <p>Name: </p>
    <input id="name" name="name" type="text"></input>
    <br />

    <p>Email: </p>
    <input id="email" name="email" type="text"></input>
    <br />

    <p>Company: </p>
    <input id="company" name="company" type="text"></input>
    <br />

    <p id='required'>* All fields are required</p>

    <p>Enquiry Details</p>
    <textarea></textarea>

    <input id="signUpSubmit" type="submit" value="Send"></input>
</form>

Эта форма находится под элементом div в html, но у элемента div есть float: слева на нем, поэтому div и форма расположены рядом.Я хочу сделать 3 текстовых ввода вертикально, а затем текстовую область справа вверху формы.значит, входные данные и текстовая область находятся рядом?

Имеет ли это смысл?

Answer 1

Вам нужно внести некоторые изменения в разметку, добавив два div для левого и правого столбцов, что значительно упростит задачу:

<form>
    <div class="left-column">
        <label for="name">Name: </label>
        <input id="name" name="name" type="text"/>

        <label for="email">Email: </label>
        <input id="email" name="email" type="text"/>

        <label for="company">Company: </label>
        <input id="company" name="company" type="text"/>
    </div>
    <div class="right-column">
        <label for="ta">Enquiry Details: </label>
        <textarea id="ta" name="ta"></textarea>
    </div>
</form>

Затем, используя простой CSS, вы можете создать эффект двух столбцов:

form {
    position: relative;
}

form div.left-column {
    position: absolute;
    width: 50%;
    left: 0;
}

form div.right-column {
    position: absolute;
    width: 50%;
    right: 0;
}

Затем используйте правильные стили CSS для ваших входов, чтобы они могли отображаться вертикально, без использования тегов <br /> в вашей разметке:

form input, form label {
    float: left;
    clear: left;
}