Two Columns in a Page

[beoleary1]

My page format is full screen.  How do I embed a clean way to create two columns in a specific page posting, so I can list out items that are only a few characters long.

[Susan]

Open the page to edit, and in html view add:
<div class="one-half first">

First column content here

</div>

<div class="one-half">

Second column content here

</div>

[beoleary1]

No such luck.  Here is my code:

<div class=”one-half first”>

US &amp; CANADA SERVICE DEPARTMENT

&nbsp;

<a href="http://www.trans-tec-online.com/meet-our-team/scott_frost/" rel="attachment wp-att-283"><img class="alignleft wp-image-283" alt="Scott_Frost" src="http://www.trans-tec-online.com/wp-content/uploads/2012/12/Scott_Frost.jpg" width="138" height="139" /></a>Scott Frost

Service Manager

35 Years of SMT Experience

&nbsp;

&nbsp;

<a href="http://www.trans-tec-online.com/meet-our-team/larry_hollingsworth/" rel="attachment wp-att-277"><img class="alignleft wp-image-277" alt="Larry_Hollingsworth" src="http://www.trans-tec-online.com/wp-content/uploads/2012/12/Larry_Hollingsworth.jpg" width="138" height="139" /></a>Larry Hollingsworth

Senior Service Engineer

South-East

30 Years of SMT Experience

&nbsp;

<a href="http://www.trans-tec-online.com/meet-our-team/jason_yi/" rel="attachment wp-att-274"><img class="alignleft wp-image-274" alt="Jason_Yi" src="http://www.trans-tec-online.com/wp-content/uploads/2012/12/Jason_Yi.jpg" width="138" height="139" /></a>Jason Yi

Senior Service Engineer

North-West

18 Years of SMT Experience

&nbsp;

<a href="http://www.trans-tec-online.com/meet-our-team/paul_trickett/" rel="attachment wp-att-280"><img class="alignleft wp-image-280" alt="Paul_Trickett" src="http://www.trans-tec-online.com/wp-content/uploads/2012/12/Paul_Trickett.jpg" width="138" height="138" /></a>Paul Trickett

Senior Service Engineer

North-East

10 Years of SMT Experience

&nbsp;

<a href="http://www.trans-tec-online.com/meet-our-team/josh_galarza/" rel="attachment wp-att-276"><img class="alignleft wp-image-276" alt="Josh_Galarza" src="http://www.trans-tec-online.com/wp-content/uploads/2012/12/Josh_Galarza.jpg" width="138" height="139" /></a>Josh Galarza

Service Engineer

South-East

16 Years of SMT Experience

&nbsp;

<a href="http://www.trans-tec-online.com/meet-our-team/derek_barton/" rel="attachment wp-att-271"><img class="alignleft wp-image-271" alt="Derek_Barton" src="http://www.trans-tec-online.com/wp-content/uploads/2012/12/Derek_Barton.jpg" width="138" height="139" /></a>Derek Barton

Service Engineer

Central US

12 Years of SMT Experience

&nbsp;
</div>

<div class=”one-half”>
Test
</div>

[Susan]

Did you test it without the images? I just tested your code without the images and it worked fine, but when I added the URLs for your images, it didn't add the images correctly, but when I added my own images from my media library, that, too, worked.

Can you please test without the images, and I will look at your code for the images.

[Susan]

I added the images by URL from your site - you can view the results on my test site:

Column Classes

 

[beoleary1]

No luck.

I and performing this operation in pages, using the Executive theme.  Here is a test page:

http://www.trans-tec-online.com/test/

[Susan]

Thanks for that link - I've identified your issue. Do you use firebug? If not, you should get it.

On my site, if I look at the elements of the text, I see this:

<div class="one-half ">

On yours, I see this:

<div class="”one-half”">
<p>Second column content here</p>
</div>

you have two sets of quotation marks, one set is plain, and the other set is curved - get rid of the non-plain quotation marks in both the first column and the second column.

[beoleary1]

taadaa!  That worked, many thanks

[Susan]

Great! Thanks for reporting back!

[Author]

Posts