Tuesday 15 June 2010

CSS: Align even elements -


A container with divs inside is 508px wide. I left the left column (strange divs) to the left and right column to the right I want to align the side. I tried the nth-child (even) - but it does not accommodate the right margin - why does not it work? Two - is there a more elegant solution to this?

CSS

  .clarfix: first, .clearfix: after {content: "\ 0020"; Display area; Height: 0; Hidden flurry; } .clarfix: after {clear: both; } .clearfix {Zoom: 1; } # Products {width: 508px; Background color: # ffc;} # products & gt; Div {float: left; Margin: 0 30px by 30px 0; Text align: center; } # Products & gt; Div: nth-child (even) {margin: 0x30px 0; Background color: # ccc;} # products [font-weight: normal;} #products img {width: 224px; Height: 120px; }   

HTML & lt; Div id = "products" class = "clearfix" & gt; & Lt; Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; & Lt; Img src = "" alt = "" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; Product 1 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; & Lt; Img src = "" alt = "" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; Product 2 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; & Lt; Img src = "" alt = "" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; Product 3 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; & Lt; Img src = "" alt = "" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; Product 4 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; & Lt; Img src = "" alt = "" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; A href = "" & gt; Product 5 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;

Have you even tried to make divs float right?

Like this:

  #products & gt; Div: nth-child (even) {margin: 0 30px 0; Background color: #ccc; Float: right;}   



No comments:

Post a Comment