CODEWITHSUNDEEP
zurb-foundation
Lurk21
Lurk21

Reputation: 2337

Zurb Foundation: Nesting rows inside other divs

I know this can be done, but I don't seem to be getting it.

Here's the HTML I have:

<div class="row">
  <div class="large-9 small-9 columns">
    <div class="section-container auto" data-section="" style="">
      <section class="active" style="padding-top: 50px;">
        <p class="title" data-section-title="" style="left: 182px;">
          <a href="#panel2">
            Accounts
          </a>
        </p>
        <div class="content" data-section-content="">
          <div id="accountSearchResults" style="">
            <div class="row">
              <div class="large-5 small-5 columns"><p>A long name</p></div>
              <div class="large-1 small-1 columns"><p>Data</p></div>
              <div class="large-1 small-1 columns"><p>Data</p></div>

I would expect this to output something like this:

 ________
|Accounts|
--------------------------------------------------
|A long name                      |Data   |Data  |
--------------------------------------------------

But instead, I'm getting:

 ________
|Accounts|
--------------------------------------------------
|A long name            |Data                  |Data  |
--------------------------------------------------

It seems like my div row is not properly nested in my div section-container.

How can I correct this?

Upvotes: 0

Views: 639

Answers (1)

Lurk21
Lurk21

Reputation: 2337

large-1 just wasn't large enough for my data, and that was throwing it all off. large-2 worked.

Upvotes: 1

Related Questions