• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 483
  • Last Modified:

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

0
KarenH1
Asked:
KarenH1
2 Solutions
 
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
 
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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now