I have VF page designed as a form with multiple fields (input, output, radio button) as shown below. I would like to extend the label on my form to represent 30% of the space. At the moment it is all stuck on the left hand side. I am already using CSS style but could not figure it out how to fix the label width. Any idea? Thank you in advance for your help. Sylvie


I have tried the table solution but it is not what I want to achieve. I would like the label to extend and moreover my radio button labels have disappeared. See below:

enter image description here

  • Hi @ultima67 Please share the code snippet.
    – SE_User
    Commented Aug 4, 2016 at 5:11
  • 1
    try putting !important to each line...it works for me "color: red !important;"
    – Micz Domz
    Commented Aug 4, 2016 at 5:55
  • When I add a style to my apex:inputfield such as style="width: 30% ! important", it change the size of the input field not the label.
    – ultima67
    Commented Aug 5, 2016 at 1:53

2 Answers 2


I have fixed it by creating a style for the label and for the radio button:

 label {
      float: left;
      width: 150px;
      margin-left: 20px;
      text-align: left;
 .radioB input, .radioB label{
      width: 30px;

Use table for formatting and use below code.

 table td {
        width: 30%;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;

<table cellpadding="0" cellspacing="0">
        <td>first</td><td>this is really long</td><td>third</td><td>forth</td>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .