Arranging fieldset elements like a typical table-design

Question

I\'m trying to arrange the titles for 3 fieldset elements the same way a typical table looks, but I can\'t get it the way I want. This comes pretty close, however...

Answer 1

what you could do is remove the label's from the flow so they don't get vertically aligned with the inputs/text.. do this by absolutely positioning them.. this will require a parent element to have position: relative; on it - I presume the overall code above is in a form element but for the sake a demo I've just wrapped all your code in a div.

Working Example

HTML:

 

  Title1
  

    

    

    
  

  Title2
  

    
  

  Title3
  

  Lorem Ipsum
  

CSS:

#form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  padding-top: 30px; /* leave a space to position for the labels */
}

fieldset {display: inline-block; vertical-align: middle;}
fieldset {display: inline !ie7; /* IE6/7 need display inline after the inline-block rule */}

label {
   position: absolute; 
   top: 5px; 
   left: auto; 
   margin-left: 5px; 
   font-weight: bold;
}

---

added per comments

because there's not enough room in comments, here's the code I was thinking which doesn't position the label, to do this the label would need to go inside the vertically aligned fieldset

#form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset {display: inline-block; vertical-align: middle; background: #eee;}
fieldset {display: inline !ie7;}


label {
   display: block;
   font-weight: bold;
}

HTML:

  Title1
  

  

  




  Title2
  




  Title3
  Lorem Ipsum