I have bizarre css behavior. I have a div container (#right-input) that houses a textarea and button and they pop out of #userinput container if I do not delete the font: x-small arial,helvetica,sans-serif; in a body tag that I have. Anyone have any ideas? How can a font declaration affect an element like that?
body {
font: x-small arial,helvetica,sans-serif;
background: #000;
margin:0;
text-align:center;
}
#userinput {
font-size:130%;
color: #333;
margin:10px auto 10px auto;
padding:10px;
background: #F7F7F7;
width:570px;
height:135px;
position:relative;
z-index:9999;
border: 1px solid #888;
-moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
opacity: 0.85;
/* for IE */
filter:alpha(opacity=85);
}
#right-input{
clear:left;
float:right;
width:480px;
}
<div id="userinput">
<div id="right-input">
Send a message to others watching!
<form id="form" action="form.php?action=add" method="post">
<TEXTAREA id="message" class="limited" name="message" maxlength="1000" COLS="45" ROWS="6"></TEXTAREA>
<br>
<input id="send" type="submit" value="Send!" />
</form>
</div>
</div>
With your current code, if you resize #right-input, it doesn't adjust #userinput because #right-input is floated which takes it out of the document flow.
Try changing your html to this:
<div id="userinput">
<div id="right-input">
Send a message to others watching!
<form id="form" action="form.php?action=add" method="post">
<TEXTAREA id="message" class="limited" name="message" maxlength="1000" COLS="45" ROWS="6"></TEXTAREA>
<br>
<input id="send" type="submit" value="Send!" />
</form>
</div>
<!-- added div to clear float -->
<div style="clear:both;"></div>
</div>
It should make sure that your textarea will stay inside its div.
If you say that font: x-small causes the problem, try to replace it with
font-size: 14px; /* 14px - for example */
font-family: arial,helvetica,sans-serif;
Related
I've been working on a gallery made in php. Some time ago, I made the layout using tables. It worked out super. Now, using tables for layouts is not recommended and sort of "deprecated" (I don't understand why, if someone could explain this to me, thank you). So, I'm trying to change the layout from tables to divs and I'm having a lot of problems (can someone recommend a good reference to how to make a good layout using css?). So far I managed this: http://jsfiddle.net/hochvater/4DbUU/ . MY FIRST QUESTION is this: how do I make the #panel_poze div to show up in the top of the container div, glued to the #panel_albume (as it is now)? I don't understand why #panel_albume is lined with the 3rd div contained by the div it is glued to (#panel_albume). My second question would be this: can't I just put the big table (you can imagine easily how it looks by the structure of the divs) into a container div and sort of leave it as it was...would this still be considered "deprecated" or not recommended?
THE CSS CODE:
body {
background-color: black;
color: white;
}
#font-face {
font-family:"john_handy";
src: url("john_handy.eot");
src: local("¢"), url("john_handy.woff") format("woff"), url("john_handy.TTF") format("opentype"), url("john_handy.svg#john_handy") format("svg");
}
#font-face {
font-family:"bradley_hand";
src: url("bradley_hand.eot");
src: local("¢"), url("bradley_hand.woff") format("woff"), url("bradley_hand.TTF") format("opentype"), url("bradley_hand.svg#bradley_hand") format("svg");
}
a:link {
color:white;
}
/* unvisited link */
a:visited {
color:white;
}
/* visited link */
a:hover {
color:red;
}
/* mouse over link */
a:active {
color:blue;
}
/* selected link */
.fonty {
text-align:center;
font: italic 30px john_handy, serif;
}
a.fonty {
font-style: normal;
font-size:20px;
}
#pp {
margin: 15% auto;
max-width:80%;
min-width:850px;
text-align: center;
white-space:nowrap;
}
.sec {
position: static;
margin: 0% 4%;
max-width: 20%;
min-width: 200px;
display: inline-block;
}
.imageOff {
border: 3px solid transparent;
margin: auto;
}
.imageOn {
border: 3px solid red;
opacity: 0.7;
filter: alpha(opacity=70);
margin: auto;
}
.selected {
padding: 2px;
border: 1px solid red;
}
.submit {
/*margin: 0;*/
border: none;
/*padding: 0;*/
background: black;
font:normal 20px john_handy, serif;
color:white;
}
.subsel {
color:red;
}
.submit:hover {
color:red;
}
.poze_albume {
border: 1px solid red;
height: 250px;
width: 200px;
}
#panel_poze {
border: 1px solid blue;
width: 70%;
min-width: 400px;
display: inline-block;
height: 100px;
}
#panel_albume {
border: 1px solid yellow;
display:inline-block;
}
#container {
text-align: center;
width: 100%;
border: 1px solid white;
min-width: 700px;
}
.album {
}
THE GALLERY CODE:
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./zastyle.css" />
</head>
<body><!-- oncontextmenu="return false;"> -->
<h1 class="fonty">Portofolio</h1>
<?php
if (!isset($_POST['restart']))
{
?>
<div id="pp">
<div class="sec ">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'" type="image" src="./studio/photoshoot.JPG" title="Studio Photography" alt="Studio Photography" />
<input type="hidden" name="album" value="studio" />
<input type="hidden" name="restart" value="1"/>
<br />
<input type="submit" class="submit" value="Studio Photography" />
</form>
</div>
<div class="sec ">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'" type="image" src="./outdoor_lifestyle/lifestyle.jpg" title="Outdoor and Lifestyle Photography" alt="Outdoor and Lifestyle Photography" />
<input type="hidden" name="album" value="outdoor" />
<input type="hidden" name="restart" value="1"/>
<br />
<input type="submit" class="submit" value="Outdoor and Lifestyle" />
</form>
</div>
<div class="sec " >
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'" type="image" src="./landscapes/landscapes.jpg" title="Landscapes" alt="Landscapes" class="album" />
<input type="hidden" name="album" value="landscapes" />
<input type="hidden" name="restart" value="1" />
<br />
<input type="submit" class="submit" value="Landscapes" />
</form>
</div>
</form>
</div>
<?php //require("za_menu.php"); ?>
<?php
}
if (isset($_POST['restart'])&&$_POST['restart']==1){
?>
<div id="container">
<div id="panel_albume">
<div class="poze_albume">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff <?php
if($_POST['album']=='studio') echo 'selected';
?>" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff <?php
if($_POST['album']=='studio') echo 'selected';
?>'" type="image" src="./studio/photoshoot.JPG" title="Studio Photography" alt="Studio Photography" />
<input type="hidden" name="album" value="studio" />
<input type="hidden" name="restart" value="1" />
<br />
<input type="submit" class="submit <?php
if($_POST['album']=='studio') echo 'subsel';
?>" value="Studio Photography" />
</form>
</div>
<div class="poze_albume">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff <?php
if($_POST['album']=='outdoor') echo 'selected';
?>" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff <?php
if($_POST['album']=='outdoor') echo 'selected';
?>'" type="image" src="./outdoor_lifestyle/lifestyle.jpg" title="Outdoor and Lifestyle Photography" alt="Outdoor and Lifestyle Photography" />
<input type="hidden" name="album" value="outdoor" />
<input type="hidden" name="restart" value="1" />
<br />
<input type="submit" class="submit <?php
if($_POST['album']=='outdoor') echo 'subsel';
?>" value="Outdoor and Lifestyle" />
</form>
</div>
<div class="poze_albume">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff <?php
if($_POST['album']=='landscapes') echo 'selected';
?>" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff <?php
if($_POST['album']=='landscapes') echo 'selected';
?>'" type="image" src="./landscapes/landscapes.jpg" title="Landscapes" alt="Landscapes" class="album"/>
<input type="hidden" name="album" value="landscapes" />
<input type="hidden" name="restart" value="1" />
<br />
<input type="submit" class="submit <?php
if($_POST['album']=='landscapes') echo 'subsel';
?>" value="Landscapes" />
</form>
</div>
</div>
<div id="panel_poze"></div>
</div>
<?php }
session_destroy();
?>
</body>
</html>
Thank you for your time invested in reading this and any ideas would be appreciated.
I'd recomend you to take a look at a CSS grid system, such as Twitter Bootstrap or 960.gs
To answer your question about tables: the use of tables were ok before CSS. CSS will help you organize your content in much better and flexible ways. I suggest you take a look at CSS Tricks and the W3 CSS tutorials to make sure you understand how <div> works and how you can float them around. Also, HTML5 take the semantic meaning of the containers and will allow you to better represent the structure of your site. Take a look at HTML5 Boilerplate if you want to learn more or even get a initial template to work with.
Roping off of Andre's answer above. A good way to practice is to simply make a website which has very basic CSS properties, but multiple different formats of the divs, so that you can understand how the boxes interact.
One such project that I did way back when was to simple make a site with a header, a horizontal navigation, then several content blocks that were full-width, 50% - 50% dual columns, 25% - 50% - 25% triple column, 33% - 33% - 33% triple, and 25%-25%-25%-25% quad columns, then a footer.
Something you should definitely be looking into is responsive layout so you can make your gallery mobile friendly.
Edit:
Is this what you were meaning as far what you want it to look like?
http://jsfiddle.net/4DbUU/1/
I changed these rules:
#panel_poze {
border: 1px solid blue;
width: 70%;
min-width: 400px;
height: 100px;
float: left;
}
#panel_albume {
border: 1px solid yellow;
float: left;
}
#container {
text-align: center;
width: 100%;
border: 1px solid white;
min-width: 700px;
clear: both;
overflow: hidden;
}
I deleted your display: inline-block; and added float: left; to both children. Then I told the container to set overflow:hidden; and to clear:both; (left and right floats)
Edit 2:
For clarity requested by the OP...
In lamens terms, when using float:left or float:right on an element, in a way picks that element up off the page and allows it to "float" which ever direction you tell it to. It performs this float with complete disregard to elements that are nearby which are not floated. Elements that are nearby then start to wrap around the floated element. This is sometimes desirable, for example floating an image left or right and allowing the text to wrap around the image. In some cases however you don't want other elements to wrap around the ones you have floated. In those cases you use the clear command to tell the next closest element to not wrap around floated elements. See these two examples:
http://jsfiddle.net/GL4Pn/2/
In the above example, no clear is present. Notice the text in the yellow .footer div is coming up between the two floated elements.
http://jsfiddle.net/GL4Pn/3/
In this example I have added clear: left; to .footer (the yellow div). Notice it is no longer wrapping up into the tiny space between divs, but it is still wrapping aroudn the element to the right.
http://jsfiddle.net/GL4Pn/4/
Here I have switched it to clear: right; notice it is no longer wrapping up to the left div or in the space between divs anymore. It is nested neatly beneath the right div. This is because the right div is the longest div. If I was to increase the height of the left div to be longer than the right div...
...Like here: http://jsfiddle.net/GL4Pn/5/
Notice now the div wraps up to the right, but not between the divs. Now.. If I change the code to clear: both;...
http://jsfiddle.net/GL4Pn/6/
Notice it is back to how it was with clear:right when the right div was longest. And if I change the left div to be shorter than the right and keep clear:both in place...
http://jsfiddle.net/GL4Pn/7/
The same result as before...
It is important to note that elements will only wrap floats if they are the very next element in the code. If I go back to the first example with no clear, but add an extra div beneath footer, you'll see that it does not misbehave as the .footer div has already take the available space.
http://jsfiddle.net/GL4Pn/8/
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot:
I have the following HTML served by someone else:
<div class="surveyTable">
<div id='fac_light' class='yesno vertical' >
<div id='fac_light_title' class='title' >Lighting (DT)</div>
<div id='fac_light_buttons' class='answers' >
<div id='fac_light_button_0' class='answer' >
<input id='fac_light_radio_0' type="radio" name="FAC_LIGHT" value="1" checked="yes"/>
</div>
<div id='fac_light_button_1' class='answer' >
<input id='fac_light_radio_1' type="radio" name="FAC_LIGHT" value="2"/>
</div>
</div>
</div>
<div id='fac_park' class='yesno vertical invalid' >
<div id='fac_park_title' class='title' >Parking Lot/Curbs (DT)</div>
<div id='fac_park_buttons' class='answers' >
<div id='fac_park_button_0' class='answer' >
<input id='fac_park_radio_0' type="radio" name="FAC_PARK" value="1" checked="yes"/>
</div>
<div id='fac_park_button_1' class='answer' >
<input id='fac_park_radio_1' type="radio" name="FAC_PARK" value="2"/>
</div>
</div>
</div>
</div>
I want to style the inputs (radio buttons) so they flow left to right on the page and so they line up between the two divs styled by the yesno class.
I don't want to refer to the IDs because that would cause a huge number of classes in my stlyesheet, and anyway, the IDs are machine generated and unreliable.
So far I have the following CSS none of which controls the flow...
body
{
font-family: "trebuchet ms", helvetica, sans-serif;
}
.yesno
{
padding-left: 1em;
padding-bottom: 1em;
}
div.invalid
{
font-weight: bold;
font-style: italic;
border: red 1px dashed;
}
TIA
So, you want all divs within the yesno div to be displayed inline?
.yesno div { display: inline; }
Just add float:left; to the yesno class
Is this what you wanted?
http://jsfiddle.net/Mutant_Tractor/hQVHA/
If you use CSS3 (not sure if this works for 2?) you can do it like this :
.answers input[type=radio]
{
float: left;
margin-left: 10px;
}
I'm asking as a last-ditch effort to comply with my conscience and do this with CSS. I want to layout this simple form using CSS, but I've spent two hours trying to get it and always end up with alignment issues. I did it in ten minutes using tables.
I need labels right-justified, the name row split in two, the labels properly vertically aligned with the input text, and all the right edges of the inputs to line up. What does it take to do this in CSS?
EDIT: Adding my CSS to see where I'm going wrong.
Here's as far as I got with the CSS:
.form_row {
width: 500px;
}
.form_row label {
text-align: right;
width: 150px;
float: left;
margin-top: 6px;
padding-right: 6px;
}
#id_first_name, #id_last_name {
width: 130px;
}
#id_email, #id_password {
width: 300px;
}
The Markup:
<div class="form_row">
<label for="id_first_name">Name:</label>
<input id="id_first_name" type="text" name="first_name" />
<input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
<label for="id_email">Email:</label>
<input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
<label for="id_password">Password:</label>
<input id="id_password" type="password" name="password" />
</div>
And the result:
You tempted me into taking up the challenge :) I just about did it in 10 minutes using CSS.
As long as you're ok with tweaking line-height's and settings dimensions in px for some elements I think its achievable.
Other things to note are how font-size, padding and line-height's affect textboxes and their dimensions.
Have a look at this: http://jsbin.com/osibu3/4
Tested in IE6+, FF3.6+, Chrome, Safari
Pasting for reference as well:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,fieldset { margin:0; padding:0 }
body { font:normal 62.5% lucida grande, lucida sans unicode }
#my-form { font-size:1.1em; width:500px; padding:20px; background:#E9E9E9;}
#my-form fieldset { border:0; margin-bottom:2px; height:20px; line-height:18px; }
#my-form fieldset label { width:70px; display:block; float:left; text-align:right; padding-right:5px; color:#61515C; }
input.text { border:1px solid #ddd; font:inherit; font-size:11px; line-height:14px; height:14px; padding:2px;
border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
.text.long { width:395px }
.text.short { width:193px }
</style>
</head>
<body>
<form action="" id="my-form">
<fieldset class="name">
<label for="first"><strong>Name:</strong></label>
<input type="text" name="first" value="first" class="text short"/>
<input type="text" name="last" value="last" class="text short"/>
</fieldset>
<fieldset>
<label for="email"><strong>Email:</strong></label>
<input type="text" name="email" class="text long"/>
</fieldset>
<fieldset>
<label for="password"><strong>Password:</strong></label>
<input type="text" name="password" class="text long"/>
</fieldset>
</form>
</body>
</html>
http://www.blueprintcss.org/
The blueprint css framework can help you with tabular layout with divs. It has simple usage and good documentation.
It's hard to give another answer with such little information in your question.
How to position a complex form with multiple fields in line across the screen?
Why are people so hell-bent on avoiding tables?
Tables are not deprecated and should be used when displaying content which logically belongs in a table.
If your form is logically grouped such that a table would be intuitive, please use a table.
Always be thinking: "What's the cleanest, simplest, most maintainable way to achieve this result."
If you want a fluid form with a variable number columns, then disregard this.
I prefer the slightly-more-semantic way, using a definition list:
<dl class="form">
<dt><label for="input1">One:</label></dt>
<dd><input type="text" name="input1" id="input1"></dd>
<dt><label for="input2">Two:</label></dt>
<dd><input type="text" name="input2" id="input2"></dd>
</dl>
Then your CSS:
dl.form {
width:100%;
float:left;
clear:both;
}
dl.form dt {
width:50%;
float:left;
clear:left;
text-align:right;
}
dl.form dd {
width:50%;
float:left;
clear:right;
text-align:left;
}
This should produce a form centered in the page, with the labels in the left column and the inputs in the right
There are many different ways to do this. It's all a matter of preference. What I typically do is have a wrapper div that contains all of the rows, and then a div block per row that contains the label, input, and validator. You can use the line-height CSS property to help you with vertical alignment. Example:
<div class="formWrapper">
<form>
<div class="formItem">
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="validator" style="display: none;">*</>
</div>
... <!-- Rinse repeat -->
</form>
</div>
<style type="text/css">
.formWrapper { width: 400px }
.formWrapper .formItem { line-height: 35px; height: 35px; }
.formWrapper label { width: 50px; }
.formWrapper input { width: 100px; border: 1px solid #000; }
.formWrapper .validator { padding-left: 10px; color: #FF0000; }
</style>
Hope that helps.
After looking at many many different solutions, I found the examples on this page (particularly the one from 'Fatal'?) some of the most helpful. But the extensive and tags did bother me a bit. So here is a little bit of a modification that some may like. Also, you find some sort of 'wrapper' or 'fieldset' style very necessary to keep the float from affecting other HTML. Refer to examples above.
<style>
.formcol{
float: left;
padding: 2px;
}
.formcol label {
font-weight: bold;
display:block;}
</style>
<div class="formcol">
<label for="org">organization</label>
<input type="text" id="org" size="24" name="org" />
</div>
<div class="formcol">
<label for="fax">fax</label>
<input type="text" id="fax" name="fax" size="2" />
</div>
<div class="formcol">
<label for="3">three</label>
<input type="text" id="3" name="3" />
<label for="4">four</label>
<input type="text" id="4" name="4" />
<label for="5">five</label>
<input type="text" id="5" name="5" />
</div>
<div class="formcol">
<label for="6">six</label>
<input type="text" id="6" name="6" />
</div>
That would be done using CSS by setting the "display" property to "inline" (since form elements are, by default, block level elements).
Do a search for "layouts without tables". Many sites describe formatting with CSS. Here is a simple intro: http://www.htmlgoodies.com/beyond/css/article.php/3642151
I suggest you blueprint CSS framework. Have a quick look at the demo page.
This is what I usually use when I need to design pretty complex forms.
HTML:
<fieldset> <legend>Consent group</legend> <form> <fieldset class="nolegend"> <p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p> <p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p> <p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p> </fieldset> <fieldset class="nolegend"> <p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p> </fieldset> <input type="submit" value="Submit" /> </form></fieldset>
CSS:
body, input, textarea, select { font: 1em Arial, Helvetica, sans-serif;}input, textarea, select { font-size: .8em }fieldset,fieldset legend { background-color: #EEE;}fieldset { border: none; margin: 0; padding: 0 0 .5em .01em; top: 1.25em; position: relative; margin-bottom: 2em;}fieldset fieldset { margin: 0 0 1em 0;}fieldset legend { padding: .25em .5em 0 .5em; border-bottom: none; font-weight: bold; margin-top: -1.25em; position: relative; *left: -.5em; color: #666;}fieldset form,fieldset .fieldset { margin: 0; padding: 1em .5em 0 .5em; overflow: hidden;}fieldset.nolegend { position: static; margin-bottom: 1em; background-color: transparent; padding: 0; overflow: hidden;}fieldset.nolegend p,fieldset.nolegend div { float: left; margin: 0 1em 0 0;}fieldset.nolegend p:last-child,fieldset.nolegend div:last-child { margin-right: 0;}fieldset.nolegend label>span { display: block;}fieldset.nolegend label span { _display: block;}
I omitted couple lines of CSS with Safari hacks. You can check out live version of this code.
Pace KyleFarris but I just had to give Ben S a vote for having the guts to mention tables. Just look at the variety of CSS solutions on this page and around the internet for a ridiculously simple problem. CSS may one day become a good solution, but for the time being replicating the simple row and column grid that the table tag provides is extremely complex. I have spent countless fruitless hours with this prejudice against tables for things like a form. Why do we do this to ourselves?
input fields, by default, are inline. Therefore, you can simply use line them up without Another option if you want them lined up correctly is as follows:
<div id="col1" style="float: left;>
<input type="text" name="field1" />
<br />
<input type="text" name="field3" />
</div>
<div id="col2" style="float: left;>
<input type="text" name="field2" />
<br />
<input type="text" name="field4" />
</div>
I prefer to use fieldset to group all elements and p for each form field.
<html>
<head>
<style type="text/css">
fieldset {
width: 500px;
background-color: lightblue;
}
fieldset legend {
font-weight: bold;
}
fieldset p {
clear:both;
padding: 5px;
}
fieldset label {
text-align: left;
width: 100px;
float: left;
font-weight: bold;
}
fieldset .Validator {
color: red !important;
font-weight: bold;
}
</style>
<head>
<body>
<form>
<fieldset>
<legend>Data</legend>
<p>
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="Validator" style="display: none;">*</span>
</p>
<p>
<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" class="required" type="text" />
<span class="Validator">*</span>
</p>
</fieldset>
</form>
</body>
</html>