CODEWITHSUNDEEP
cssformswebforms
Alix Axel
Alix Axel

Reputation: 154623

Problems with Forms and CSS

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.

Upvotes: 0

Views: 470

Answers (4)

ekhaled
ekhaled

Reputation: 2930

first of all you need to reset the padding and margins on the <p> elements

p,label{ 
 padding:0; 
 margin:0 
}

secondly, you are floating elements inside a block element without clearing them later... hence the overflow issue... here is a working version of the code http://jsbin.com/eheva3

Note: I have used the clearit method which requires extra markup
You can use either that or the "clearfix" method... google for "clearfix" to find out more

Upvotes: 1

Tor Valamo
Tor Valamo

Reputation: 33769

Here's one. The main thing is the clear:both; div at the bottom, but there are a few more things changed too.

<!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;
    background-color: #666;
}
.content {
    background-color: #FFFFFF;
    -moz-border-radius: 6px;
}
</style>
</head>

<body>

<div class="box">
    <div class="content">
        <div class="_20">
                <label>Name:</label>
        </div>
        <div class="_30">
                <input type="text" id="" />
        </div>
        <div class="_20">
                <label>Email:</label>
        </div>
        <div class="_30">
                <input type="text" id="" />
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

</body>
</html>

Upvotes: 1

Azeem.Butt
Azeem.Butt

Reputation: 5861

You should start with the simplest possible implementation that works and build whatever fancy styling you want up from there. Getting rid of all the extraneous tags, all you really need is:

<div class="box">
    <div class="content">
        <label>Name:</label>
        <input type="text" />
    </div>
</div>

You don't need to add more divs and paragraphs to get it to snap to a grid, just style the elements that are already there.

Upvotes: 0

eozzy
eozzy

Reputation: 68720

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

Upvotes: 1

Related Questions