WordPress.org

1. Hampstead
   Member
   Posted 3 years ago #

   I am using a one column design which can be seen at:

   http://www.321websites.co.uk

   I wish to arrange the bullet points on the home page into two columns.

   I'm an old tables boy, but don't want to use them.

   How do I go about creating two columns in the MS editing interface?

   Thanks in advance for any help.

2. WizardRegis
   Member
   Posted 3 years ago #

   What's the MS editing interface? Bah, editing interface is for people too lazy to learn the proper way ;)

   Anyway, there are several ways to do it in CSS and XHTML, since tables are out.

   1. Placing the top list inside a <div style"float:left;"></div> will cause the below text to float on the right side of it.

   2. Placing the top list inside a <div style="float:right;"></div> will cause it to be floating to the right and the text under will appear where the top list now is.

   3. Placing both lists inside each <div style="float:left;"></div> will create two columns.

3. Hampstead
   Member
   Posted 3 years ago #

   MS should've read CMS. i.e. the WP interface.

   You're right. Tables are out and I wish to be dragged into the 21st Century complete with CSS and XHTML.

   Thanks for the above - I understand basically what's going on here.

   I'll go and have a play. I assume I do this in the HTML view in the WP editor?

   Am I using the right terminology? Is it called the WP editor?

4. Hampstead
   Member
   Posted 3 years ago #

   Actually - could you give me a clue on how the code should look for two columns with some example content please?

   Sorry for being so newbe!

5. WizardRegis
   Member
   Posted 3 years ago #

   The DIV tag create a box and by applying float:left/right we can get it to be placed left/right of the remaining text, just like align="right" in a IMG would work.

   Two boxes are probably the best way now, so this is how it should look:
   

   <div style="float: left;">
   	<ul>
   		<li>List 1</li>
   	</ul>
   </div>
   
   <div style="float: left;">
   	<ul>
   		<li>List 2</li>
   	</ul>
   </div>

   This will cause the box with List 1 to be placed to the left. Then the box with List 2 will also be placed to the left, but since its DIV is below the first one it will be placed as much to the left as possible, which in this case is right of the first box. Wow that sounded confusing even to me.

   Then we can insert width, margin, padding and stuff after the float to further customize the boxes.

6. Hampstead
   Member
   Posted 3 years ago #

   OK - that makes sense.

   I'll have a play with that tomorrow or the day after and come back for more help with padding etc if need be.

   Thanks again.

7. solecist
   Member
   Posted 3 years ago #

   ok, so to get a balanced set of 'columns' should I float the right column to the right?
   (for the most 'standards' compliant placement?)

   thanks for the tip -

8. solecist
   Member
   Posted 3 years ago #

   that's not working at all - wouldn't I at least have to define the width attribute for the left column to get it to work?

Topic Closed

This topic has been closed to new replies.