Jump to content

- - - - -

adding style divs in grid causes wrapping.

  • Please log in to reply
1 reply to this topic

#1 mightaswell



  • Members
  • 26 posts
  • LocationPortland, Oregon USA
  • Country: Country Flag

Posted 21 June 2013 - 08:36 PM

Im posting this in OT since it seeems this is more of a CSS issue I can't figure out.


Site: http://compass.casca....com/home-page/


I have a content box section in which I am attempting to use the grid..I cant understand why if I add padding or borders to divs inside a row the divs wrap.


Here's the section giving me trouble:

<!-- ContentBox | Section Template -->
<section id="contentbox" class="container clone_3 section-contentbox fix">


<div id="whowhenwhere" class="row">

<div id="who" class="span4">
WHO<br>COMPASS is relevant to engineers dealing with the technical challenges of today

<div id="when" class="span4">
Monday<br>September 9, 2013

<div id="where" class="span4">
WHERE<br>Hyatt Regency Orange County<br>Garden Grove, CA



If you inspect the section with firebug, and disable the padding on the div "who", the three span4 columns no longer wrap.


I need to add padding to all three and border left on who, border left/right on when and border right on where


but when i add padding OR borders the where div breaks the row.





#2 James B†

James B


  • DMS Subscriber†
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 June 2013 - 10:44 PM

Hello, so you need something roughly like - http://screencast.com/t/6KirMgnMen
Try adding in the borders first, i used the below in that example in the screenshot
#where {
    border-right1px solid black;
#when {
    border-left1px solid black;
    border-right1px solid black;
#who {
    border-left1px solid black;


You can add/remove padding to each of the above, but you might need to adjust the % width of the columns used to create the 3 bar layout using the below code. In the screenshot i used the below based on the code on your page


.row > .span4, .row-fluid > .span4, .editor-row > .span4 {