6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

How would you replicate this Amazon feature with CSS?

by Stephen Dean
5 replies
  • WEB DESIGN
    • |
Hi all - I'm trying to create a page with CSS, but I'm an amateur.

One element I'm trying to create is a row of products, like Amazon has on its home page. How would you create this layout with CSS - preferably where each product is a new DIV (or other element if that's smarter)?

I'm not concerned about the layout of text or images; rather, I'm concerned about the positioning of each product so that it's in a row.



I know how to do this with tables, but not with CSS.

Any help or ideas? Thanks in advance.

Cheers,
Stephen Dean
#amazon #css #feature #replicate
  • Profile picture of the author rhinocl
    something like this
    <div width= "80px" height="80px" style="float:left;"></div>
    Copy and paste the above line into a page 4x and play with the values. Be sure to set a page size first i.e. <body><div name="wrapper" width="960px">blah blah

    When you have it the way you want it add a class to the divs and remove width height and float and set them in the css file
    .your-classname {width:80px; height:80px; float:left;
    }

    You can probably get the next set to start on a new line just by doing this. If not then you need to find a tutorial on clearing floats.
    Signature
    cheap search engine optimization
    {{ DiscussionBoard.errors[7401914].message }}
  • Profile picture of the author clickbump
    Markup:

    Code:
    <div class="item break">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item break">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
    CSS
    Code:
    .item{width:25%;float:left}
.break{clear:left}
    Place the "break" class on any element that starts a new row.

    You can add additional styling, padding, background colors, etc via css. If you add padding, you'll need to apply a box-sizing:border-box css to the .item class to normalize the layout and prevent items from extending outside their intrinsic widths.

    Code then becomes:

    Code:
    .item{
  width:25%;
  float:left;
  padding:10px;
  border:1px solid red;
 
//normalize layout box to maintain exact width regardless of padding*
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

.break{
  clear:left
}
    *What I mean here is that the border-box value for the box-sizing attribute will force the container to maintain the stated width. Padding will be applied *inside* the box, keeping its apparent outer width unchanged. This is much easier to work with in layout design, since you can add padding without breaking the layout.
    Signature
    {{ DiscussionBoard.errors[7402004].message }}
  • Profile picture of the author clickbump
    There are several ways to do it. Here's another way that's a bit more concise with the markup elements and uses virtually the same base css:

    Markup:

    Code:
    <div class="container">
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
	<span>Item 4</span>
	<span class="break">Item 5</span>
	<span>Item 6</span>
	<span>Item 7</span>
	<span>Item 8</span>
</div>
    CSS:

    Code:
    .container span{
    width:25%;
    float:left;
    display:inline-block
    }
    
.break{
    clear:left
    }

    You could also use an unordered list structure or a definition list for even more concise and arguably more semantic markup.
    Signature
    {{ DiscussionBoard.errors[7402077].message }}
    • Profile picture of the author Stephen Dean
      Originally Posted by clickbump View Post

      There are several ways to do it. Here's another way that's a bit more concise with the markup elements and uses virtually the same base css:
      Very cool! Thank you, using this.

      Just one thing, looks great in Chrome. In IE9 a second "Item 8" appears on a 3rd line?
      Signature
      Free Coaching WSO: How to finish all your 2013 "Goals" in JANUARY with my proven productivity secrets - taken from 9 years working as a freelance copywriter. Click Here

      Occupation: Best Copywriter Ever.
      Clients:       Matt Bacak, Jim Edwards, Ryan Deiss and more.
      {{ DiscussionBoard.errors[7402156].message }}
      • Profile picture of the author clickbump
        Originally Posted by Stephen Dean View Post

        Very cool! Thank you, using this.
        Sounds great. Using the span elements provides cleaner markup and is a bit more semantic (the markup more accurately describes the purpose of the content) than using all div elements. It would be even more semantic to use an unordered list element, since that's likely best describes the type of content you are displaying. But the downside is that there is more css required with the ul/li elements than with the div/span solution.

        Another thing to consider with spans is that, by default, they are "inline" (not "block") elements, and they flow in layout just like images or anchor tags. This means they flow side by side naturally without needing floats and defined widths as block level elements require.

        So you can experiment with and without floating them. You can also convert them to semi block level elements using the display:inline-block css. This gives them better layout structure (ie, you can add padding and margin to them) while possessing some desirable properties of inline elements (such as side by side display).

        Just one thing, looks great in Chrome. In IE9 a second "Item 8" appears on a 3rd line?
        Do you mean that an element that's not in the markup, appears in IE9?
        Signature
        {{ DiscussionBoard.errors[7405886].message }}

Trending Topics