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/
Related
Currently the page is just two divs sitting side by side inside a containing section. I had two trailing <br> tags on qtr_calc, which were pushing down sem_calc. Shouldn't qtr_calc be able to have as many newlines at the bottom as I like without affecting sem_calc? If not, is there a workaround?
Somebody had a similar issue here, but there no explanation of why this is able to occur and the answer that helped them does not help me.
The divs' html:
<section id="content">
<div id="qtr_calc">
<label for="qtr_cred_hrs">Quarter class credit hours:</label><br />
<input type="text" id="qtr_cred_hours" /><br /><br />
<label for="qtr_grade">Letter grade:</label><br />
<input type="text" id="qtr_grade" /></div>
</div>
<div id="sem_calc">
<label for="sem_cred_hrs">Semester class credit hours:</label><br />
<input type="text" id="sem_cred_hours" /><br /><br />
<label for="sem_grade">Letter grade:</label><br />
<input type="text" id="sem_grade" /></div>
</div>
</section>
The divs' CSS:
#qtr_calc {
float: left;
margin: 3em;
padding: 2em;
border: 1px double #F2F2F2; /* inside border */
outline: 1px solid #BFBFBF; /* outside border */
}
#sem_calc {
float: left;
top: 0;
margin: 3em;
padding: 2em;
border: 1px double #F2F2F2; /* inside border */
outline: 1px solid #BFBFBF; /* outside border */
}
And here's a pastebin with the rest of the page, in case it helps somehow.
You have an extra closing div tag here:
<input type="text" id="qtr_grade" /></div>
Demo
Remove extra closing Div's and top:0; and try to give them width say 20%. That should solve you problem.
I am making a title bar for a table. It has to be contained inside a table row just because the rest of the page has been designed for a table (which I cannot change at this stage).
What I want to do is create a block inside the table row that contains some text, a few buttons (as images) and some input boxes and a dropdown selection option.
I've been playing round with divs and floating them which works well enough but the inputs and image buttons are not aligning nicely so I played with using spans instead which works kinda nicer but still not aligning as I need it to. It all needs to fit inside the blue bar and the small white gap between the the blue bar and the grey strip shouldn't be there...
Heres what it looks like at the moment...
Here is my code with the block using divs and its essentially the same with spans
<td colspan='8'> <-- this is the start of the table cell that i have to work inside
<div style="width: 100%; ">
<div class="tableHeadRow" style="float: left; background-color: #002b59; padding: 5px 5px 0px 5px; width: 678px;">
<form method='post' name='tranLookup'>
<input type='hidden' name='dates' value='range' />
<input type='hidden' name='op' value='viewTransactions' />
<span style="margin-right: 10px; color: #ffffff; ">Transaction History</span>
<div class="printerButtonWrapper flow" style="margin-right: 10px; display: inline-block;">
<a id="printButton" href="#toPrint">
<img src="images/accounts.png" alt="Printer View" class="clip printerButton" />
</a>
</div>
<div style="margin-right: 10px; display: inline-block;">
<input placeholder="From date: " type='text' id='fromDate' name='fromDate' class="textbox calText" style='width: 80px;' value="startDate">
<span style="color: #ffffff"> - </span>
<input placeholder="To date: " type='text' id='toDate' name='toDate' class="textbox calText" style='width: 80px;' value="endDate">
</div>
<div style="margin-right: 10px; display: inline-block; ">
<span style="color: #ffffff;">Transactions per page:</span>
<select name='qty' id="transactionQuantity">
<option value='10'>10</option>
<option value='25' selected="selected">25</option>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='200'>200</option>
</select>
</div>
<div class="goWrapper flow" style="cursor: pointer; display: inline-block; ">
<a onclick='document.tranLookup.submit();'><img src='images/accounts.png' alt='Go' class='clip go' /></a>
</div>
</form>
</div>
<div class="blueCornerWrapper flow" style="float: right; display: inline-block; ">
<img src='images/common.png' alt='' class='clip blueCorner' />
</div>
<div style="clear: both;" ></div>
</div></td> <-- heres the end of the table cell
Frustratingly I had this all sorted once but I didn't commit code and I lost it all so now I am trying to get it back to its nice aligned state unfortunately it was a couple months ago now and I cant remember what I did...
Does anyone have some awesome mad skills to help me line these up nicely?
Let's get started by cleaning up your code.
Let's have a fiddle! http://jsfiddle.net/a3985/
Have a play with this. I gave the td a transactionSelection ID. There is no need for a div, the form will do. I have removed the img tags leaving just the links. You should have the images placed in your css like this for example:
#transactionSelection #goSubmit { background: url(image.jpg) no-repeat; }
HTML
<td colspan='8' id="transactionSelection">
<form method='post' name='tranLookup'>
<legend>Transaction History</legend>
<input type='hidden' name='dates' value='range' />
<input type='hidden' name='op' value='viewTransactions' />
<input placeholder="From date: " type='text' id='fromDate' name='fromDate' class="textbox calText" style='width: 80px;' value="startDate">
<input placeholder="To date: " type='text' id='toDate' name='toDate' class="textbox calText" style='width: 80px;' value="endDate">
<label for="transactionQuantity">Transactions per page:</label>
<select name='qty' id="transactionQuantity">
<option value='10'>10</option>
<option value='25' selected="selected">25</option>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='200'>200</option>
</select>
<button onclick='document.tranLookup.submit();' id="goSubmit">Submit</button>
</form>
CSS - Place this in an external sheet if possible or in your head. Because you are dealing with legacy code I would recommend all css being restricted to #transactionSelection which is the id of the td.
#transactionSelection legend, #transactionSelection label, #transactionSelection select { margin: 2px 0 0; float: left; }
#transactionSelection input { float: left; margin: 2px 10px; }
#transactionSelection label { margin-right: 10px; }
#transactionSelection #printButton { display: block; float: left; height: 20px; width: 50px; padding: 2px; margin: 0 20px; background: #F00; }
#transactionSelection #goSubmit { display: block; float: left; height: 20px; width: 50px; padding: 2px; margin: 3px 20px; background: #F00; border: none; float: left; }
This is a good starting point if you would really like to clean this up.
Sam
Before I reveal a solution, I just want to say that it would make things way easier for you(and everyone else) if you wrote your css on a separate sheet. Also, it's best not to use tables anymore, but you probably already knew that ;)
What I did was I used display:inline-block; for the child elements, so that they are treated as text, and I used text-align:center; for the parent div. And to fix your alignment issues, I used vertical-align:middle;. I then gave the div with the blue background a greater height and now it looks good.
See for yourself.<----THIS IS THE FIDDLE
.tableHeadRow{
text-align:center;
height:30px;
}
span,.printerButtonWrapper,#printButton,.clip printButton,input .textbox calText,select #transactionQuantity,img {
display:inline-block;
vertical-align:middle;
}
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;
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form
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>