CODEWITHSUNDEEP
htmlcss
raklos
raklos

Reputation: 28555

help converting this table to divs and css

This is driving me insane. how can i achieve the same effect like the table below but with divs and css.

<table>
    <tr>
        <td><label>label1</label></td>
        <td>foo</td>
    </tr>
    <tr>
        <td><label>label2</label></td>
        <td>bar</td>
    </tr>
</table>

EDIT

If foo or bar are long paragraphs they should not flow under the label column

Upvotes: 1

Views: 86

Answers (4)

Blender
Blender

Reputation: 298512

Here's a working example: http://jsfiddle.net/59GqN/. Foobar is foobar

It's complete overkill, but it seems to work. (I'd use tables if it takes me more than 20 minutes to figure out how to make it work without them. I do not promote them for site layout, though, but lay off the hate on the tables).

Good luck!

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 186063

HTML:

<ul>
    <li>
        <label> Label1 </label>
        Foo
    </li>
    <li>
        <label> Label2 </label>
        Bar
    </li>
</ul>

CSS:

label {
    display:inline-block;
    width:100px;
}

Live demo: http://jsfiddle.net/RFhur/1/

Styled live demo: http://jsfiddle.net/RFhur/2/

Upvotes: 0

Mahesh Velaga
Mahesh Velaga

Reputation: 21971

<div style="width: 30%;">
   <div style="float: right;">
      <div>
          foo 
      </div>
      <div>
          bar
      </div>
   </div>

   <div style="float: left;">
      <div> 
         <label>label1</label>
      </div>
      <div>
         <label>label2</label>
      </div>
   </div>
</div>

You can view the output here: http://jsfiddle.net/Y7XZx/

Upvotes: 1

claviska
claviska

Reputation: 12490

Fixed width, floated labels are one way:

<p>
    <label style="width: 100px; float: left;">Label 1</label> Foo
</p>

<p>
    <label style="width: 100px; float: left;">Label 2</label> Bar
</p>

You could also discard the float property and use display: inline-block instead, but watch out for IE6.

Upvotes: 1

Related Questions