Solved

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

Posted on 2013-01-14
2
261 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
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now