Three Boxes on Homepage

[designthing]

Can someone tell me the best way to create three columns on the homepage for either CTA boxes or simply 3 blurb intros, and how i could style the backgrounds with css. I know that css3 can split a column into 3 and there are custom fields, but not sure what the best practice is.
Thanks!

[polyfragmented]

I personally would do it with floats. Another way to do it is using display: inline or inline-block. Both have their caveats or things to keep in mind while using them, so not sure what the "best" way would be. I'm comfortable with floats.

Basic info on styling background can be found here. For more diverse sources, just do a search via Google and others.

As far as I understand it, the CSS3 multi-column layout module affects text, not arbitrary elements.

[yojoe]

CSS grids are still not fully supported thus they aren't used as often, as they should be.
I'm fine with using customfields, and floating divs with manually loading content into them.
For beginners it's better to use customfields, because this plugin gives almost full wysiwyg management.

[ccagle8]

if you really want an equal 3 columns that are cross-browser - use a table. I originally prescribed to the idea that tables are bad and so 1990 web design, but after a lot of failed attempts - ive gone back to using them for this scenario.

[yojoe]

CC: if problem starts with equal height of floated containers, use jscript or use an img as background in wrapper.

Leave tables only for displaying tabular data

[ccagle8]

yojoe: I've done both of those before, but i hate how javascript made the page "flash" b/c the javascript wouldnt take effect until the page was finished loading... I love the img background idea, but i only do that if i can 100% be sure of the amt of text that will be in there...

I never use tables... but i use them for this scenario b/c they work the best IMHO.

[designthing]

Thanks for the tips guys.
I really want a way for either me or a client to be able to edit three boxes without messing up the code - ie foolproof! I know how to add divs in html edit mode, but a client probably wouldn't. In WYSIWYG edit mode, they'd probably delete or move the div tags. I take it i'd have to create 3 custom fields for homepage. The only other way would be to just hard-code into a homepage template. If they wanted changes, they'd have to seek assistance.

[n00dles101]

An easier option would be to create your main page.

Then create 3 child pages for each of the columns.

Add the following to your template functions.php file

Code:

function get_content($page){  
        $path = "data/pages";
        $thisfile = @file_get_contents('data/pages/'.$page.'.xml');
        $data = simplexml_load_string($thisfile);
        echo stripslashes(htmlspecialchars_decode($data->content, ENT_QUOTES));;
}

Then in your template just add 3 of the following in each of the columns, replacing $page with your sub-page names.

Code:

<?php get_content($page); ?>

That way the client just updates the 3 sub pages.

Edit: in version 3.1+ you can forget about the function and just use the inbuilt caching/indexing.

Code:

<?php getPageContent($page); ?>