CODEWITHSUNDEEP
cssgridresponsive-designzurb-foundation
Carlo
Carlo

Reputation: 4158

Problems with nested grid in Zurb Foundation

I'll just show you a jsfiddle I've created to illustrate what I'm trying to achieve:

http://jsfiddle.net/vraG7/3/embedded/result/

Here's the code for that part:

<div class="row">
    <div class="twelve columns">
        <h2 class="first_column category_title">Nome Categoria</h2>

        <div class="row">
            <div class="nine columns thumbnail"><img
                src="http://www.placehold.it/125x125" alt=""></div>
            <div class="three columns date"><time
                datetime="2013-02-28" >28<br>02<br>2013</time></div>
        </div>
        <div class="row">
            <div class="twelve columns">
                <h2 class="post-title"><a href="">Titolto del post</a></h2>
            </div>
        </div>
    </div>
</div>


</div> <!-- category-column -->

What I'm trying to do is to have the 125x125 image and the date box to its right to be the same width as the orange box with "Nome categoria". I thought I did everything right, but apparently I'm missing something.

Upvotes: 1

Views: 2393

Answers (1)

JAMESSTONEco
JAMESSTONEco

Reputation: 2051

It is hard to say what exactly the problem is. You are overriding a lot of foundation styles. height, margin, etc. on a bunch of divs.

1) You are applying the background color that you hope to align to to an <h2>. I suggest applying it to the containing <div>. the h2 will never to do the edge of the div, therefore you will not be able to align them.

2) for the date you applying the color to the background. it is possible they are already aligned. if you change the above.

3) for troubleshooting nested grids, it is easy to add the panel class to all of them, this will increase the spacing but let you see the relationship of each nested grid to each other.

this is on foundation 4, but might be useful:

http://foundation.zurb.com/grid-example2.php

Upvotes: 3

Related Questions