CODEWITHSUNDEEP
htmlcsszurb-foundation
Nick
Nick

Reputation: 117

How to align columns in foundation

I have finally started to use foundation and it's great. So I was just testing out an example and I noticed that if only have two columns in a row it looks like this:

enter image description here

I would have thought that "Box B" would have been next to "Box A". How do I align it to the left? I haven't read too much into the documentation (as I should be), but I thought I'd ask.

In case you needed the code (the code is given when you download foundation):

<div class="row">
     <div class="large-4 columns">
         <div class="panel">
             <p>BOX A</p>
         </div>
     </div>
    <div class="large-4 columns">
        <div class="panel">
            <p>BOX B</p>
        </div>
    </div>

</div>

Thanks,

Nick

Upvotes: 6

Views: 6053

Answers (3)

TomZomW
TomZomW

Reputation: 531

You can add the .end class to column B to get it to align to the left.

<div class="large-4 columns end">
    <div class="panel">
        <p>BOX B</p>
    </div>
</div>

Source: http://scotch.io/tutorials/css/understanding-zurb-foundation-5s-grid-system

Upvotes: 11

cheesey_toastie
cheesey_toastie

Reputation: 391

This is because the base Foundation grid has to add up to 12.

The columns are created using the css classes: .small-#, .medium-#, and .large-#. The #s have to add up to be 12 since Foundation uses a 12 grid system. Source: http://scotch.io/tutorials/css/understanding-zurb-foundation-5s-grid-system

Change the classes to large-6

Upvotes: 3

Maurice Botha
Maurice Botha

Reputation: 125

Check your css for class="row" and add {float:left;}

Upvotes: 1

Related Questions