CODEWITHSUNDEEP
css
DNB5brims
DNB5brims

Reputation: 30568

Suggestions on laying out web pages using CSS

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?

Upvotes: 0

Views: 152

Answers (4)

Lance Quejada
Lance Quejada

Reputation: 131

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.

Upvotes: 2

zombat
zombat

Reputation: 94147

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>

Upvotes: 4

Rowno
Rowno

Reputation: 3394

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

Upvotes: 0

Chase Florell
Chase Florell

Reputation: 47377

Try using "Float" tags in your divs

Upvotes: 1

Related Questions