Home/ Questions/Q 516187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:42:20+00:00

This is a follow up to this question . I’ve tried to come up

  • 0

This is a follow up to this question. I’ve tried to come up with a solution that allowed me to have in-line labels in a multi-column form, by reading some of the answers provided in the question mentioned above I realized that it was much more simpler than I originally had though, this is my prototype:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
    width: 16%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._30 {
    width: 26%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
.box {
    padding: 10px;
    margin: 10px 0px;
    background-color: #666;
}
.content {
    background-color: #FFFFFF;
    padding: 10px;
    -moz-border-radius: 6px;
}
</style>
</head>

<body>

<div class="box">
    <div class="content">
        <div class="_20">
            <p><label>Name:</label></p>
        </div>
        <div class="_30">
            <p><input type="text" id="" /></p>
        </div>
        <div class="_20">
            <p><label>Email:</label></p>
        </div>
        <div class="_30">
            <p><input type="text" id="" /></p>
        </div>
    </div>
</div>

</body>
</html>

In theory this seems to work, but in practice all I get is this very weird result (in FF 3.5.6):

weird result screenshot

If I drop the p tags around the labels and input the result changes a bit:

weird result without p tags screenshot

What’s wrong? Is there any hack I’m supposed to make use of?

How can I place the labels / inputs inside the box like they are supposed to?

I appreciate all input, thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
    width: 16%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._30 {
    width: 26%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
.box {
    padding: 10px;
    margin: 10px 0px;
    background-color: #666;
}
.content {
    background-color: #FFFFFF;
    padding: 10px;
    -moz-border-radius: 6px;
   overflow:hidden;
}
</style>
</head>

<body>

<div class="box">
    <div class="content">
        <div class="_20">
                <p><label>Name:</label></p>
        </div>
        <div class="_30">
                <p><input type="text" id="" /></p>
        </div>
        <div class="_20">
                <p><label>Email:</label></p>
        </div>
        <div class="_30">
                <p><input type="text" id="" /></p>
        </div>
    </div>
</div>

</body>
</html>

    BTW, Check this out: How to create perfect form Markup and style it with CSS

    • 0