Using CSS to align 4 columns

I am just starting to use CSS instead of tables.

I have a registration form that will look like this:


*  User Name:  __________  *
*  Password:   _______
   First Name: _________________
*  Last Name:  _________________

Using tables I would have defined 4 columns:

Col 1 would be the required star
Col 2 would be the label
Col 3 would be the input textbox
Col 4 would be the validation warning

How would I best accomplish this using CSS?

Please keep in mind the textboxes will be various
lengths, plus I want the validation warning to
appear to the immediate right of the textbox.

I've kind of got it working (except the validation
warning appears to the left of the textbox), but I wonder if there
is a better way to do this?

div.halfrow {
    clear: none;
    padding-top: 0;
    width: 757px;

}
  div.halfrow span.labelrequired {
    float: left;
    width: 20px;
    text-align: left;
  
} 
  div.halfrow span.labelleft {
    float: left;
    width: 150px;
    text-align: left;

}
 
 div.halfrow span.inforight
{
    font-weight: bold;
    float: right;
    width: 562px;
    text-align: left;
 
} 

.fade
{
    border-width: 1px;
    border-color: #c8c8c8;
    border-style: solid;
    
} 

div.halfrow span.validator
{
    font-weight: bold;
    float: left;
    width: 15px;
    text-align: left;
   }


<div class="halfrow" >
<span class = "labelrequired"><asp:Label ID="Label6" runat="server" cssclass="requiredstar" Text="*"></asp:Label></span>
    <span class = "labelleft"><asp:Label ID="Label1" runat="server" Text="User Name:"></asp:Label> </span>
    <span class = "validator">
        <asp:requiredfieldvalidator id="rfvUsername" 
        runat="server"  ErrorMessage="User Name Required"
	    ControlToValidate="txtUserName" >*</asp:requiredfieldvalidator> </span>
	    <span class = "inforight">
    <asp:textbox id="txtUserName" class= "fade" tabIndex="1" 
        runat="server" MaxLength="15" ToolTip="Enter up to 15 characters" 
        Width="142px" ></asp:textbox></span>
   </div>

Open in new window

KarenH1Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

darkappleCommented:
while dealing with divs  you need to take best care about their widths. debug the design with firebug.

I've got following without asp code.
<style>
div.halfrow {
    clear: none;
    padding-top: 0;
    width: 757px;

}
  div.halfrow span.labelrequired {
    float: left;
    width: 20px;
    text-align: left;
  
} 
  div.halfrow span.labelleft {
    float: left;
    width: 150px;
    text-align: left;

}
 
 div.halfrow span.inforight
{
    font-weight: bold;
    float: left; /*changed to left*/
    width: 362px;
    text-align: left;
 
} 

.fade
{
    border-width: 1px;
    border-color: #c8c8c8;
    border-style: solid;
    
} 

div.halfrow span.validator
{
    font-weight: bold;
    float: left;
    width: 160px;/* controlled width */
    text-align: left;
   }
</style>
</head>

<body>
<div class="halfrow" >
    <span class = "labelrequired">*</span>
    <span class = "labelleft">Username: </span>
    <span class = "validator"> <input   maxlength="15"/>*</span>
    <span class = "inforight"> Enter up to 15 characters" </span>
  </div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kadabaCommented:
You probably need to assign more width to your validator, to fit in the required field message.
I added a border just for testing remove it later..

Let us know.

<style type="text/css">
div.halfrow {
    clear: none;
    padding-top: 0;
    width: 757px;
	border: 1px solid black; 
}
  div.halfrow span.labelrequired {
    float: left;
    width: 20px;
    text-align: left;
	border: 1px solid brown;
} 
div.halfrow span.labelleft {
    float: left;
    width: 150px;
    text-align: left;
	border: 1px solid green;
}
 
 div.halfrow span.inforight
{
    float: left;
    width: 400px;
    text-align: left;
	font-weight:bold;
	border: 1px solid red;
} 
div.halfrow span.validator
{
    width: 175px;
	float: left;
    text-align: left;
	font-weight:bold;
	border: 1px solid yellow;
}

</style>

<div class="halfrow" >
	<span class = "labelrequired">
		<label>*</label>
	</span>
    <span class = "labelleft">
		<label>User Name:</label>
	</span>
    <span class = "inforight">
		<input type="text" id="txtUserName">
	</span>
	<span class = "validator">
        Validation message here
	</span>
</div>

Open in new window

0
mreuringCommented:
There's tricks and ways to 'improve' what you have done. But all of the possible solutions to issues such as this would fall under the category 'compromise'.
As such, I usually find it easier to generate a small image containing the '*'-character and adding padding to the label, sticking the * on the label as a background-image in the left middle position (this way you need less html :)). Since you now have the '*'-image, you can also use it to set in the background of your containing div, to the right middle position when a validation-error has occurred. Also, you can add a title-attribute to the div containing the error-message, when a user hovers over anything inside the div, this message will be shown through built-in browser scripts!

That of course is the quick, dirty, but oh so easy way ;) All of this assumes a lot of control over your html-ouput of course. My having no current experience with any microsoft-related web-tech except its' browsers, makes me blissfully unaware of how far the straitjacket limits your control... A such, I've just created the below example with the same blissful ignorance and no asp-code :)

div.input {
    width: 757px;
    zoom: 1;/*IE-only float clearing*/
}

div.input:after { /*non-IE float-clearing*/
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}

.input label {
    float: left;
    width: 150px;
    padding-left: 20px;
    text-align: left;
}

.required label {
    background: transparent url(required.gif) no-repeat 0 50%;
}

div.error {
    background: transparent url(required.gif) no-repeat 100% 50%;
}

<!-- This is the input field when it is not in error... -->
<div class="input inputText required" >
    <label for="myInput">myInput-label</label>
    <input type="text" class="text" id="myInput" length="15">
</div>

<!-- This is the input field in error mode... -->
<div class="input inputText required error" title="This field is required!" >
    <label for="myInput">myInput-label</label>
    <input type="text" class="text" id="myInput" length="15">
</div>

Open in new window

0
KarenH1Author Commented:
Thank you, putting the borders in does help to debug, and yes, I am limited to using asp.net validators.

Only one or more stars will appear if the input fields fail validation - asp.net takes care of the popup message box with the warnings to the user.

But I still can't figure out how to get the "validator" class to appear immediately to the right of the "inforight" class.  all the suggestions still render them to the left of the input text box.

I want it to appear as:

___________*
____________________*
_______*

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.