Member Avatar for Pouri

Dear all,

I have some textboxes for user to fill in data. The box has the same width. But I cannot align them vertically and neatly. It always have some difference in their horizontal position.

Please suggest any method to arrange text box or label neatly.

Thanks!

  • 2 Contributors
  • 1 Reply
  • 53 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by scrappedcola
Member Avatar for scrappedcola

There are a couple of things you can do. I would suggest placing the label's and input boxes in containing elements (such as div's) that have uniform widths.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<HTML xmlns="http://www.w3.org/1999/xhtml">
    <head>
	<style>
	    .labelCont,
	    .inputCont
	    {
		float:left;
		width:49%;
		margin-bottom:10px;
	    }
	    .labelCont{
		text-align:right;
		margin-right:10px;
	    }
	    .inputCont{
		text-align:left;
	    }
	</style>
    </head>
    <body>
	<div class=labelCont>This is a label</div>
	<div class=inputCont><input type=text /></div>
	<div class=labelCont>This is a label with slightly larger text</div>
	<div class=inputCont><input type=text /></div>
	<div class=labelCont>This is a label width less text</div>
	<div class=inputCont><input type=text /></div>
    </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.