[RESOLVED]label css alignment probelm

CSS, HTML, Label, Table, Web Forms, , , , 
<label class="lblStyle1">l1</label>
<input class="OtherCom1"></input>

<label class="lblStyle1">l1</label>
<input class="OtherCom1"></input>

.OtherCom1
{
	font-family: Georgia, "Times New Roman" , Times, serif;
	font-size: 15px;
	display: block;
	width: 50%;
	margin-top: 5px;
}

.lblStyle1
{
	font-family: Georgia, "Times New Roman" , Times, serif;
	font-size: 16px;
	float: left;
	margin-top: 5px;
	text-align: left;
	width: 12%;
}

When I run the code above, the second label not align with first label.. is it my css got problem? 

I guess yyou want to show the labels and input in a single line. if so then try adding the controls inside a table like given below

<table width="100%">
  <tr>
    <td>
       <label class="lblStyle1">l1</label>
    <input class="OtherCom1"></input>
    </td>
    <td>
      <label class="lblStyle1">l1</label>
    <input class="OtherCom1"></input>
    </td>
    </tr>
  </table>

Complete Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <style>
     .OtherCom1
    {
        font-family: Georgia, "Times New Roman" , Times, serif;
        font-size: 15px;
        display: block;
        width: 50%;
        margin-top: 5px;
    }

  .lblStyle1
  {
      font-family: Georgia, "Times New Roman" , Times, serif;
      font-size: 16px;
      float: left;
      margin-top: 5px;
      text-align: left;
      width: 12%;
  }
   
  </style>
  
</head>
<body>
<table width="100%">
  <tr>
    <td>
       <label class="lblStyle1">l1</label>
    <input class="OtherCom1"></input>
    </td>
    <td>
      <label class="lblStyle1">l1</label>
    <input class="OtherCom1"></input>
    </td>
    </tr>
  </table>
</body>
</html>

Leave a Reply