• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

How to create multi layout columns in Genesis

Last Updated on July 17, 2018 Favorited: 0 times

This is a reference post to create multi-layout columns using the different CSS methods and hacks.

The simplest way to create multiple columns is to define each sub-container a width which should not be more than the total 100%.

Example:-
HTML

<div class="conatiner">
<div class="sub-conatiner first">Hello</div>
<div class="sub-conatiner"> World!</div>
</div>

CSS

.conatiner {
width: 100%;
}
.first {
clear: both;
margin-left: 0;
}
.sub-conatiner.first {
width: 50%;
}
.sub-conatiner {
width: 50%;
float: left;
}

or simply define it as this

.conatiner {
width: 100%;
}
.first {
clear: both;
margin-left: 0;
}
.sub-conatiner {
float: left;
width: 50%;
width: calc(100% / 2);
}

 

Now if I will add a border, the content will not in column because the width exccessed. We need to lower the width to add padding, margin or borders.

.conatiner {
width: 100%;
}
.first {
clear: both;
margin-left: 0;
}
.sub-conatiner.first {
width: 70%;
}
.sub-conatiner {
width: 20%;
float: left;
border: 1px solid red;
margin-left: 10px;
}

or like this

.conatiner {
width: 100%;
}
.first {
clear: both;
margin-left: 0;
}
.sub-conatiner {
float: left;
border: 1px solid red;
margin-left: 10px;
width: 45%;
width: calc(90% / 2);
}

 

width: 50%; and width: calc(100% / 2); works great when we want equal columns but not when we want sub container to be of different width.

Create multi-layout columns in Genesis

Create multiple columns is not difficult as we can define each sub-container a different width where the total width not will be more than width: 100%;

The CSS works same for every site. Genesis child themes include most popular configuration by default. You can copy each width HTML and work on the same.

You can take the help of the Genesis columns advanced article where I have added the HTML classes which the Genesis columns advanced plugin outputs which is similar to what the default child themes have.

Alternatively, You can try Column Shortcodes plugin or copy the HTML and CSS to use it on your site.

Bill Erickson has a Column Class Generator which is really useful in some cases.

These are the basic methods to create multi-layout columns. The advanced columns can be created using CSS Columns, CSS Flexbox and CSS Grid.

I have written the reference post on CSS Flexbox in Genesis and CSS Grid in Genesis which will give an idea of working with flexible layouts.

Go and explore the Advance Columns and Make them Equal heights. Here are some of the resources for advanced users.

Resources:-
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts
https://css-tricks.com/almanac/properties/c/columns/
https://www.sitepoint.com/css-multi-column-layout-tutorial-for-beginners/

Related Posts

  • Featured Post Widgets in Columns
  • Post Page Blog Archive Template with Layouts in Genesis
  • Blog Archive Posts layout in 3 columns in Genesis
  • Genesis Columns Advanced

Categories: Free Content, Genesis Tutorials Tags: columns

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service