How to make a grid-like form

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,414 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,721 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 793 | Replies: 2

•

Join Date: Jul 2006

Posts: 111

Reputation: ryy705 is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

ryy705

Offline

Junior Poster

How to make a grid-like form

Jun 2nd, 2008

Hello,
Is there a way to create a grid-like form with CSS? Meaning, I would like the label and input fields to be equidistant from one another. It naturally happens if I use tables but is there a way to achieve the same effect with CSS?
Floating label elements to the left and floating input elements to the right does quite achieve the same effect. Can't find a relevant solution by googling, many thanks in advance.

•

Join Date: Jun 2007

Posts: 179

Reputation: macneato is an unknown quantity at this point

Rep Power: 2

Solved Threads: 13

macneato

Offline

Junior Poster

Re: How to make a grid-like form

Jun 3rd, 2008

Hi ryy705,

You will have to use CSS to achieve what you want. A example would be;

Help with Code Tags

(Toggle Plain Text)

 

#col {width:250px;float:left;margin:2px;}
	
#row {width:100%; margin:2px}

And your html will be as follows:

Help with Code Tags

(Toggle Plain Text)

<form action="ac_contact.php" method="post">
<div id="row">
<div id="col">Name:</div>
<div id="col">
  <input type="text" name="name" />
</div>
</div>
<div id="row">
<div id="col">Surname:</div>
<div id="col">
  <input type="text" name="surname" />
</div>
</div>
</form>

Very easy to understand. But if you having any problems, Just shout.

•

Join Date: Jan 2007

Posts: 2,556

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 114

MidiMagic

Offline

Posting Maven

Re: How to make a grid-like form

Jun 10th, 2008

This is a proper use of tables.

Tables are not deprecated. What W3C wanted to stop the wrong use of tables for is using them to create margins, borders, or padding (which was done by web authors before those styles existed).

Daylight-saving time uses more gasoline