Introducing Quests: Tailored gamification & bridging in-person events with your community Mike Gitkos Friday at 12:39 PM1 day
Posted March 16, 20169 yr I'm trying to put together a 10 column grid on a page, with one of the columns being larger than the other 9, and running in to problems with it. Hope someone can shed some light on how this might work for me. Starting point: set up a grid with 12 columns (have put in a black border to better present the issue, by the way.....not related to the issue at all) <div> <div class='ipsGrid ipsGrid_collapsePhone'> {{foreach $rows as $row}} <div style='border:1px solid black;' class='ipsGrid_span1'>1</div> <div style='border:1px solid black;' class='ipsGrid_span1'>2</div> <div style='border:1px solid black;' class='ipsGrid_span1'>3</div> <div style='border:1px solid black;' class='ipsGrid_span1'>4</div> <div style='border:1px solid black;' class='ipsGrid_span1'>5</div> <div style='border:1px solid black;' class='ipsGrid_span1'>6</div> <div style='border:1px solid black;' class='ipsGrid_span1'>7</div> <div style='border:1px solid black;' class='ipsGrid_span1'>8</div> <div style='border:1px solid black;' class='ipsGrid_span1'>9</div> <div style='border:1px solid black;' class='ipsGrid_span1'>10</div> <div style='border:1px solid black;' class='ipsGrid_span1'>11</div> <div style='border:1px solid black;' class='ipsGrid_span1'>12</div> {{endforeach}} </div> </div> Works great: Next step - drop the last 2 columns, and make the second column _span3: <div> <div class='ipsGrid ipsGrid_collapsePhone'> {{foreach $rows as $row}} <div style='border:1px solid black;' class='ipsGrid_span1'>1</div> <div style='border:1px solid black;' class='ipsGrid_span3'>2</div> <div style='border:1px solid black;' class='ipsGrid_span1'>3</div> <div style='border:1px solid black;' class='ipsGrid_span1'>4</div> <div style='border:1px solid black;' class='ipsGrid_span1'>5</div> <div style='border:1px solid black;' class='ipsGrid_span1'>6</div> <div style='border:1px solid black;' class='ipsGrid_span1'>7</div> <div style='border:1px solid black;' class='ipsGrid_span1'>8</div> <div style='border:1px solid black;' class='ipsGrid_span1'>9</div> <div style='border:1px solid black;' class='ipsGrid_span1'>10</div> {{endforeach}} </div> </div> Here's the result - first row all good, then the second has various column indents, then you see additional indenting on the third row and so on.
March 16, 20169 yr Author OK - so this appears to be because I've not enclosed each row in a div of its own....thrown one in and everything drops on to its own line, even more of a mess. I've worked around it now by adding a <br> after the </div> for the last column. I'll go back to how to style that enclosing div and see what I can do.
Archived
This topic is now archived and is closed to further replies.