Jump to content


Photo
- - - - -

adding style divs in grid causes wrapping.


  • Please log in to reply
1 reply to this topic

#1 mightaswell

mightaswell

    Member

  • Members
  • 22 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>

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

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

</div>

...
</section>

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.

 

Thoughts?

 

 



#2 James B

James B

    Advocate

  • Members

  • 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 {
    width29.915%;
}