ansaurus

Question

Answer 1

+1 A:

Try this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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

Nimbuz 2009-12-27 02:26:25

=) Thanks Nimbuz, both for the solution and for the link. You've been very helpful.

Alix Axel 2009-12-27 02:40:13

np :) Make sure you add width to content if you want to support IE6 as well.

Nimbuz 2009-12-27 02:49:05

Ohh.... The IE6 nightmare. =((

Alix Axel 2009-12-27 03:03:34

Just apply width:100% to .content and you should be fine.

Nimbuz 2009-12-27 03:35:08

Answer 2

A:

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.

Azeem.Butt 2009-12-27 02:37:32

Answer 3

+1 A:

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"&gt;
<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>

Tor Valamo 2009-12-27 02:37:50

Answer 4

+1 A:

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

pǝlɐɥʞ 2009-12-27 02:38:15

ansaurus

tags:

views:

answers:

Problems with Forms and CSS

related questions