Is there a simple 3 column template for processwire ?

[pwired]

Hi,

Is there somewhere a simple 3 column template for processwire ?

Something like:

titles       main text        titles

links                               links

info                                 info

[pwired]

Think I found one here

http://webdesign.about.com/od/layout/l/zbetter3col.htm

[diogo]

-------------------------------------------------------------------------

| overflow visible |

| --------------------------------------------  --------------------- |

| |                 float left | | | |

|  | ------------------ ------------------ | | | |

| | | | | | | | | |

| | | float left | | float right | | | float right | |

| | | | | | | | | |

| | ------------------ ------------------  |  |                   |  |

| -------------------------------------------- --------------------- |

-------------------------------------------------------------------------

[totoff]

hmm, i recommend my own one: http://modules.processwire.com/modules/unsemantic-site-profile/

just give your divs inside .grid-container the class grid-33 and you are good to go. demo here: http://unsemantic.com/demo-responsive

[pwired]

Thanks totoff, will try this out. I'm in kind of super hurry, otherwise I wouldn't have posted.

[Martijn Geerts]

@pwired, consider Diogo's approach.

The one you linked to, present the main column as last in the DOM.

( Higher in the DOM is more important then lower in the DOM  )

[pwired]

http://www.dynamicdrive.com/style/layouts/category/C10/

[pwired]

@pwired, consider Diogo's approach.

Hi Martijn, thanks for stepping in. Yes I am trying diogo's approach and some others.

I have to finish it this evening and show something good or I will lose the job.

For me (not being a pro) it's gonna be a race against the clock.

[diogo]

For me this is the fastest way:

3 divs inside another: float them left, set box-sizing: border-box, and then give them approximately 1/3 of 100% width. give them an approximate right-margin that fills the blanks and 0 right-margin to the last div using :last-child. Adjust the right margin until the last div touches the side.

http://codepen.io/anon/pen/xBGej

[Joss]

Maybe your fastest approach would be to shove in Bootstrap 3 or Foundation.

This is Diogos suggestion in Bootstrap - sorry, bit off the cuff so it might have a typo or two,

<div class="container">

  <div class="row">

     <div class="col-md-10>
          <div class="row">
              <div class="col-md-2">
                   Left Column
              </div>
              <div class="col-md-8">
                     Middle Column
               <div class="col-md-2">

               </div>

          </div><!-- /row -->

     </div><!-- /col md 10 -->

     <div class="col-md-2">
           Right had column
      </div>

</div><!-- /row -->
 

The main problem is that on smaller devices The rows will rearrange in the order:

Left Row

Middle

Right Row

Which is not helpful as you really want the middle to be the first thing you see (and why this sort of layout is problematic)

However, Bootstrap also allows you to hide divs or make them visible in different devices. So, you can actually do FOUR columns, with the first and the fourth having the same info but hidden or shown depending on your need. So, an easier way would be:

<div class="row">
      <div class="col-md-2 hidden-sm">
      </div>
      <div class="col-md-8">
      </div>
      <div class="col-md-2">
      </div>
      <div class="col-md-2 visible-sm">
      </div>
</div>
 

Sorry, best I could come up with in 5 minutes

[totoff]

@martijn 

.push-x, .pull-x (http://unsemantic.com/css-documentation#6-push-amp-pull-classes)

but indeed, if it is a race against the clock ...

[pwired]

Thanks everybody, really appreciate your posts here. I go for diogo's example http://codepen.io/anon/pen/xBGej

doesn't go more easy and that's what I need for today. I can fill it in with example text, pictures and links.

Thanks.

[cstevensjr]

Good Luck

[Martijn Geerts]

@totoff position is everything

@pwired, good luck!