Coding & columns

Hello,

There are several ways you can do columns of content with HTML. The old way would be to use tables to create the columns. This isn’t ideal and is a bit old school. Here is a standard way to do this with CSS and floating divs (make sure you use HTML view in the WordPress editor to do this).

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
<div class="clear"></div>

Make sure you include the following CSS in your style sheet:

.column {
float: left;
width: 200px;
padding: 10px;
}
.clear {
width: 100%;
clear: both;
}

Just replace the width of the column with your own width and make sure you have enough room to fit 4 of those columns (plus the padding) horizontally. Good luck!

Cheers,
David

Hi David,

Many thnaks for your informative and helpful response. I’ll note it for future reference.

However, I’m using a theme that has custom shortcodes. The one for 4 columns is:

[one_fourth] [one_fourth] [one_fourth] [one_fourth_last]

But I cannot work out how to use this twice and put some padding between the two. I tried your <div class=”clear”></div> but it isn’t enough. Any ideas? I’d rather not touch the css if I can help it!

Cheers,

B

Hello,

Ok, now I understand what you’re trying to do. It all depends greatly on what HTML the shortcode is producing. Can you provide a URL with an example of the 4 columns? If so, I can take a quick look at the source and see if you can do anything with it.

Cheers,
David

Hi,

Here’s the url:

https://walking-holidays-france.com/wordpress/1786/walking-provence-west/

If I just put 4 days across the page it works okay, but it’s an 8-day tour!

Many thanks,

B

Hello,

I can see you put in the div with a class of “clear” as I suggested:

<div class="clear"></div>

Did you put the matching CSS in for that div? Without that it won’t do anything. If you didn’t then you can do inline styling without touching the style sheet like this and it should work:

<div style="width:100%;clear:both;"></div>

Cheers,
David

Hi,

Thanks for your efforts, but the inline styling without touching the style sheet by adding:

<div style=”width:100%;clear:both;”></div>

Hasn’t worked. Any further suggestions?

Thanks,

B

double check your syntax with the shortcodes – the fourth and fifth day don’t seem to be separated properly, and the last day has a typing error with an excess / in [/one_fourth_last]

Hi,

We’ll it looks like it’s just the separation issue that’s now outdstanding. I’m sure there must be a simple way of separating the fourth and fifth days so Day 5 is pushed down in a series with 6 and 7.

I’ve tried everything except touching the css as these are shortcodes.

B

what is the code that you type into the post editor?

could you paste the code into a https://wordpress.pastebin.com/ and post the link to it here?

for instance ‘day4’ does not seem to have the ‘one-fourth-last’ div/style; ‘day5’ seems to be within the ‘day4’ div, and ‘day7’ does have no ‘one-fourth’ div/style at all.

Hi,

The code we are told to input is:

[one_fourth][one_fourth][one_fourth][one_fourth_last]

Having done it, WP seems to have added the /s itself. I’m not sure whethetr it needs them or not.

I have thus tried to simply input the code twise.

B

The code we are told to input is:

[one_fourth][one_fourth][one_fourth][one_fourth_last]

and you would add you other content just between these shortcodes?

just wondering how the shortcode is supposed to know when the fourth column for instance is finished.

if the shortcode came with the theme, is this a commercial theme?

have you tried to get support from the theme author/seller?

Yes, I just add text in between.

Do you think the coding is incomplete?

Yes, a commercial theme where some support is available, but very irregular. Thus my posting here.

Do you think the coding is incomplete?

your ‘one_third’ section seems to have gone ok.
did you do anything different there?

hard to judge without having access to the full theme templates, such as functions.php (?) to check the shortcode; or a possible ‘readme’ file.

if you have the time, you could try:

[one_fourth]contents[/one_fourth] [one_fourth]second column contents[/one_fourth] [one_fourth]third col content[/one_fourth] [one_fourth_last]last column contents[/one_fourth_last]

Alchymyth,

You’ve cracked it! Take a look now – it’s resolved and I’m very grateful. As soon as I saw the…

[one_fourth_last]last column contents[/one_fourth_last]

I was optimistic and it made sense.

I just wish I were so logical, but I’m prepared to remain a disciple!

Many thanks for your valued input!

B.

well done ??

please mark this thread as ‘resolved’