Improve company productivity with a Business Account.Sign Up

x
?
Solved

Need help styling my column two columns of data. I am using CSS with html markup

Posted on 2013-01-14
2
Medium Priority
?
276 Views
Last Modified: 2013-01-15
Hello, I have an Asp.net MVC .form "cshtml". I am using the fieldset command with a little bit of css markup to style the page. The css is only about 6 lines of css markup.

basically I want a label on the left side of my form, followed by a control such as a textbox, middle initial or last name on the right side of the label. Below is a visual representation of what I mean.

First Name               [______________]
Middle Initial           [____]
Last Name                [_______________]
Phone                       [_______________]

Something is terribly wrong though, because the left most column data is not wide enough, and the labels are being broken and printed on the next line. Can someone tell me how to fix my CSS so that I get left and right column data, with the columns aligned? I tried to increase the left most column, by setting the "width" attribute. Below is the CSS I am using. Attached is my markup of my web form, which I am trying to style. I would really appreciate some help.

 .fixwidthlabelLeft
{
    margin: 5px;
    height: 20px;
    width: 150px;
    float:left;
}
cshtmlCode.txt
0
Comment
Question by:brgdotnet
2 Comments
 
LVL 16

Accepted Solution

by:
Kamal Khaleefa earned 200 total points
ID: 38777099
hi

try to create a table like this
<table>
<tr>
<td width="20%">your text</td>
<td align="left"> your field</td>
</tr>


 

 
 
</table>
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 920 total points
ID: 38778486
You can use a table. You could also use just CSS.

Try this:
p{float:left;clear:both;}
.fixwidthlabelLeft
{
    margin: 5px;
    height: 20px;
    /*width: 150px;*/
    float:left;
} 
input{float:right;clear:right;margin-left:20px;}

Open in new window

0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question