Menu icon Foundation
How to vertically align columns within a row?

I’m trying to figure out how to vertically align standard Foundation columns within a row. I want to make sure that whatever code I use to align the divs doesn’t disturb the Foundation code that is already in place to render my fluid layout. Thanks!

<!DOCTYPE html>
<html>

    <head>
        <!—- Standard linked CSS and JS files -->
    </head>
    
    <body>
        <div class="row" id="header">
        
            <div class="large-3 medium-3 columns intro">
        		Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.
        	</div>
        	
            <div class="large-6 medium-6 columns logo">
        	    Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
        	</div>
            
            <div class="large-3 medium-3 columns social">
        		Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
        	</div>
            
        </div>
    </body>
    
</html>          

alignalignmentverticalvertical aligncenterlayoutFoundationdivcolumncolumnsrow

I’m trying to figure out how to vertically align standard Foundation columns within a row. I want to make sure that whatever code I use to align the divs doesn’t disturb the Foundation code that is already in place to render my fluid layout. Thanks!

<!DOCTYPE html>
<html>

    <head>
        <!—- Standard linked CSS and JS files -->
    </head>
    
    <body>
        <div class="row" id="header">
        
            <div class="large-3 medium-3 columns intro">
        		Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.
        	</div>
        	
            <div class="large-6 medium-6 columns logo">
        	    Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
        	</div>
            
            <div class="large-3 medium-3 columns social">
        		Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
        	</div>
            
        </div>
    </body>
    
</html>          
Avner Wolff over 4 years ago