Column Modes – Half and Half Page with a Sidebar to the Right

Anonymous
April 28, 2013 at 6:12 pm #7365

Hi Guys,

I am trying to create an option for a Half and Half 2-Page Column in on a single page with Sidebar to the right.

So I will end or with more space with a Split Page Half and Half Page with a Sidebar to the right.

Can this be done? Any help will be appreciated!

Thank you! Mark
Anonymous
April 29, 2013 at 7:32 am #37945
Inside your page editor switch to text(html) editing. Create two divisions and assign unique id for each one. After that simply style id through child theme style.css, or custom css.

HTML:
```
<div id="column_left">

...left column stuff goes here...

</div>

<div id="column_right">

...right column stuff goes here...

<div>
```
CSS:
```
#column_left {

float:left;

}
```
Anonymous
April 29, 2013 at 9:32 am #37946
Or, just the HTML.
```
<div class="alignleft" style="width:47%;">

...left column stuff goes here...

</div>

<div class="alignright" style="width:47%;">

...right column stuff goes here...

</div>
```
Anonymous
April 29, 2013 at 3:44 pm #37947

Quote:

<div class=”alignleft” style=”width:47%;”> …left column stuff goes here… </div> <div class=”alignright” style=”width:47%;”> …right column stuff goes here… </div>

Hi Luko – If I use this option and there is a Theme Update, will the update delete this code?

Anonymous
April 29, 2013 at 3:49 pm #37948

Quote:

Or, just the HTML.

<div class=”alignleft” style=”width:47%;”>

…left column stuff goes here…

</div>

<div class=”alignright” style=”width:47%;”>

…right column stuff goes here…

</div>

Prasanna – okay just tried this option, seems to work well, but if Luko’s option above will give me a permanent option to add this as a new column mode, and it will not be affected by a theme update, I may opt for that, since i can easily use it again in a GUI Interface.

Anonymous
April 29, 2013 at 4:11 pm #37949

float: left; is already declared in the theme stylesheet. You just have to use the proper class in your HTML. Unless you’re going for extreme customizations, no need to add extra float left, right elements to the custom CSS

Anonymous
April 29, 2013 at 4:15 pm #37950

Okay got it, thank you brother!

Anonymous
April 29, 2013 at 5:57 pm #37951

@Prasanna – You’re right, no need for floating. I was typing that from head. Although, giving unique id or class name for columns is better option by my opinion.

@Mark – Solutions are (Prasanna and mine) practically the same. Worpdress and Graphene treat that code as content, so it won’t be lost during update. Although I think you misunderstood me, that code wont give you any template for reusing again on next page. For any other page you have to put it in again. 🙂

Mod

Kenneth John Odle
April 29, 2013 at 6:07 pm #37952

Just to muddy the waters, you can also use the multiple columns property. However, it also requires vendor prefixes to work properly.

Admin

Syahir Hakim
May 8, 2013 at 1:15 pm #37954

I know I’m late, but you could also use this:

https://forum.graphene-theme.com/plugin-highlight/easily-add-columns-to-posts-and-pages-with-grid-columns/