Suggestions on laying out web pages using CSS

Question

This is the text:

productName $100 Add to Cart

I want to layout the text in follow:

productName 
$100              Add to Cart

the "productName", and "$100" should align left, and Add to Cart should align right, I know that it can be done using table tag, but apart from tables, any other suggestion?

Answer 1

Try using "Float" tags in your divs

Answer 2

Try placing each of the 3 in separate divs and then float them left or right inside a containing which has a fixed width.

Answer 3

The following markup will work. You might want to limit the width of either of the divs of course, as they will be 100% of their parent container widths.

<div>
  productName
  <div>
    <span style="float:right">Add to Cart</span>
    $100
  </div>
</div>

Answer 4

Like this:

<div class="product">
    <div class="name">Product Name</div>
    <div class="clear">
        <div class="price">
            $100
        </div>   
        <div class="actions">
            <a href="#">Add</a> to <a href="#">Cart</a> 
        </div>   
    </div>
</div>

CSS:

  .product{ //if you care to specify a width }
  .product .name{ padding: 5px 0; } 
  .product .price, .product .actions{ float: left; padding: 5px 0; }   
  .product .price{ width: 150px;} //customize width to your preference
  .product .actions{ width: 350px; } //customize width to your preference
  .product .actions a{ margin: 0 5px;} 

  .clear{ overflow: hidden;} //reusable class for clearing floats

Hope this helps.