Jump to content
Sign in to follow this  
mightaswell

adding style divs in grid causes wrapping.

Recommended Posts

mightaswell    1
mightaswell

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

 

Site: http://compass.cascademicrotech.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?

 

 

Share this post


Link to post
Share on other sites
James B    436
James B
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%;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×