Sunday, 15 April 2012

Blueprint CSS last column not working correctly -



Blueprint CSS last column not working correctly -

i have 10 column design setup , having problem havingtwo divs each 5 columns wide. sec 1 jumps downwards under first one, though have "last" in sec div.

here's code:

<div class="container"> <div class="span-5"> <ul><li><p><strong>discounts on professional development programs protect interests.</strong> monitor state , national policy issues impact our industry , take action on our members' behalf. these efforts ensure our members have powerful voice , strong representation on issues matter.</p></li></ul> </div> <div class="span-5 last"> <ul><li><p><strong>marketing , promotional opportunities , management , operational resources.</strong> access useful tools valuable insights , expert perspectives on industry issues , trends help business succeed.</p></li></ul> </div> </div>

here's part of css:

== structure: ======================== * page width: 640 px * number of columns: 10 * column width: 55 px * margin width: 10 px ====================================== default, grid 640px wide, 10 columns spanning 55px, , 10px margin between columns. if need fewer or more columns, utilize formula calculate new total width: total width = (number_of_columns * column_width) - margin_width -------------------------------------------------------------- */ /* container should grouping columns. */ .container { width: 640px; margin: 0 auto; } /* utilize class on div.span / container see grid. */ .showgrid { background: url(src/grid.png); } /* body margin sensile default look. */ body { margin:1.5em 0; } /* columns -------------------------------------------------------------- */ /* sets basic grid floating , margin. */ div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10 {float:left;margin-right: 10px;} /* lastly column in row needs class. */ div.last { margin-right: 0; } /* utilize these classes set width of column. */ .span-1 { width: 55px;} .span-2 { width: 120px;} .span-3 { width: 185px;} .span-4 { width: 250px;} .span-5 { width: 315px;} .span-6 { width: 380px;} .span-7 { width: 445px;} .span-8 { width: 510px;} .span-9 { width: 575px;} .span-10, div.span-10 { width: 640px; margin: 0; }

blueprint-css

No comments:

Post a Comment