CSS

Question

I'm trying to reduce the amount of html markup related to presentation in my front end code. In a form I'm currently working on, I want to have 2 column of form fields. One way that will definitely do what I want is this:

<html>
<head>
<style>
body {width:400px;}
.col {width:200px; height: 100px; float:left; display:block;}
label, input {display:block;}
</style>
</head>
<body>

<div class="col">
        <label>Field1:</label>
        <input>
</div>
<div class="col">
        <label>Field2:</label>
        <input>
</div>

</body>
</html>

I want to achieve the same results when rendered in browser WITHOUT the div tags in the mark up. So I did something like this:

<html>
<head>
<style>
body {width:400px;}
label,input {width:200px; height: 30px; float:left; display:block;}
</style>
</head>
<body>
        <label>Field1:</label>
        <label>Field2:</label>
        <input>
        <input>
</body>
</html>

This is close, but I want the <label> markup tag to appear before each <input> markup tag in the code like so:

<label>field1</label>
<input>
<label>field2</label>
<input>

But problem here is that I can't think of maintainable css code that will make the label appear on top of each input field. Is there a good way to make both the mark up and the rendered result appear the way I want to?

clairesuzy · Accepted Answer

One solution is to put the input inside the label..

<label>Field1:<input></label>
<label>Field2:<input></label>

then example CSS..

label {width:200px; height: 30px; display:inline-block;}
input {display: block;}

or

label,input {width:200px; height: 30px; display:inline-block;}

MikeM · Answer

Seem's hacky, but this works.

http://jsfiddle.net/pxfunc/VCaMe/1/

using class="col1" or class="col2"...

HTML:

<form>
    <label for="i1" class="col1">Label 1</label>
    <input id="i1" class="col1" type="text" value="Input 1" />
    <label for="i2" class="col2">Label 2</label>
    <input id="i2" class="col2" type="text" value="Input 2" />
</form>

CSS:

form {width:600px;background-color:#eee;overflow:hidden;}
.col1 {display:block;float:left;line-height:30px;width:301px;height:30px;background-color:#f00;border:0;}
.col2 {position:relative;top:-30px;display:block;float:right;line-height:30px;width:299px;height:30px;background-color:#ff0;border:0;}

That said I still agree with the first comment under the question, seems like over-thinking a solution that could use div's or some kind of <label> & <input> wrapper

CSS - Two Column Form

Tags:

html

John

2 Answers

clairesuzy

MikeM

Recent Activity

Donate For Us