How to have a textbox with title above? - asp.net

Question

I am trying to create a bunch of text boxes with their title above the text boxes and format them so there are several textboxes in a line.
This is what I want:
The problem I'm having is when I try to write the CSS to allow me to do this, the text boxes overlap.
I am using a custom Asp.Net Master Page in Visual Studio that was created by my employer and I'm having a hard time trying to make this happen.
Here is my code:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPages/Intranet/Intranet.2Columns.Master"
CodeBehind="AddNewApplication.aspx.vb" Inherits="...AddNewApplication" %>
<asp:Content ID="Content1" ContentPlaceHolderID="headmeta" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headCustomScriptsCSS" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpMainContent" runat="server">
<h1>
Add a New Application</h1>
<h3>
General Description</h3>
<form>
<div class="group1">
<label for="EnglishShortName">
English Short Name</label>
<br />
<input type="text" name="EnglishShortName" />
</div>
<div class="group1">
<label for="FrenchShortName">
French Short Name</label><br />
<input type="text" name="FrenchShortName" />
</div>
<div class="group1">
<label for="ApplicationCode">
Application Code</label><br />
<input type="text" name="ApplicationCode" /><br />
</div>
<div class="EnglishLN">
<label for="EnglishLongName">
English Long Name</label><br />
<input type="text" name="EnglishLongName" /></div>
<div class="EnglishLN">
<label for="SecureChannel">
Secure Channel</label><br />
<select name="SecureChannel" class="inline">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
</asp:Content>
And my CSS:
.group
{
display:inline-block;
}
.EnglishLN
{
display:inline-block;
margin-right:5px;
}
Any ideas?
Thanks!

Answer 1

I think the problem you are having is that the labels inside your div.group1's and div.EnglishLN's are by default displaying as blocks meaning they expand to fill all horizontal space. Try setting the labels to display: inline; like so:
.group1
{
display: inline-block;
}
.EnglishLN
{
display: inline-block;
margin-right: 5px;
}
.group1 label, .EnglishLN label
{
display: inline;
}
Edit: I just noticed a error in both our css where the.group selector should be .group1
Edit2: It seems to work in this fiddle http://jsfiddle.net/kmxF5/

Answer 2

It might be a bit of overkill, but I couldn't resist removing your inline css and adding a few helper CSS styles.
I prefer 'float' over 'inline-block' but they can be a pain to use if you haven't used them before.
This http://jsfiddle.net/chillfire/QYSQ8/ should work, however it is not responsive.
My CSS;
.fl{
float:left;
}
.fullwidth{
width:80%;
}
.split30
{
width:30%;
}
.split60
{
width:60%;
}
.EnglishLN
{
margin-right:5px;
}
.boxPad{
margin:10px 0 10px 0;
}
Using a combo of the above you can float/pad your way around.
If you are going to build a data entry form, have you considered using a table?
Tables still work for tabular data and can be easier to manage forms with.
If you are building anything that needs to work nicely across browsers and don't enjoy hand coding CSS or using tables then you should have a look at something like bootstrap or Zurb foundation (there are other CSS UI frameworks out there too)
cheers

Answer 3

Have you tried setting the size of your div tags? Something like:
.group
{
display:inline-block;
width:200px;
height:200px;
}
.EnglishLN
{
display:inline-block;
margin-right:5px;
width:200px;
height:200px;
}
Then if you want to your inputs to be longer/shorter just play around with their "size" attributes.