Solved

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

Posted on 2013-01-14
2
265 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 50 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 230 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Web site error 3 36
imap read mail 1 27
CSS: How to get responsive tables to not be so spread out on desktop 5 33
div to fit another div 8 21
This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

786 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