Title: 3-column coding for single page
Last modified: August 31, 2016
---
# 3-column coding for single page
* [RossB](https://wordpress.org/support/users/rossb/)
* (@rossb)
* [10 years, 3 months ago](https://wordpress.org/support/topic/3-column-coding-for-single-page/)
* Hi folks. The single page the title refers to is the [‘Movie Review Archives’](http://www.boomtownrap.com/boomtown-rap-movie-reviews/)
page of my blog. I am using a Twenty Fourteen child theme.
* I’ve used some basic coding from [this site](https://www.elegantthemes.com/blog/tips-tricks/how-to-create-column-layouts-in-wordpress)
to create a 3-column layout.
* I have 2 problems, as follows:
* 1. I want to have the columns spaced wider apart and spanning further across
the page.
* 2. I have arranged the movie archives in 3 separate ‘blocks’, each comprising
the same 3-column layout, but the only way I can keep the ‘blocks’ separated
with a space is via a dotted line. If I remove this, the bottom ‘block’ moves
up to fill the empty spaces of the ‘block’ above. I have tried various coding
options I came across when researching how to “properly” separate the ‘blocks’
with a blank space, but none have worked.
* If anyone who is not such a coding hillbilly as I (which means just about anyone!)
can help, would be appreciative.
* Cheers
Ross
Viewing 5 replies - 1 through 5 (of 5 total)
* [neotechnomad](https://wordpress.org/support/users/neotechnomad/)
* (@neotechnomad)
* [10 years, 3 months ago](https://wordpress.org/support/topic/3-column-coding-for-single-page/#post-6955619)
* HTML… (put in your page)
* ```
(...put stuff in here)
(...put stuff in here)
(...put stuff in here)
```
* CSS… (put in your child theme CSS – styles.css)
* ```
#column-wrapper {
width: 100%;
height: auto;
margin: 20px auto;
text-align: center;
}
```
* ```
.single-column {
display: inline-block;
vertical-align: top;
width: 28%;
height: auto;
margin: 0 2%;
text-align: left;
}
```
* Thread Starter [RossB](https://wordpress.org/support/users/rossb/)
* (@rossb)
* [10 years, 3 months ago](https://wordpress.org/support/topic/3-column-coding-for-single-page/#post-6955669)
* Thanks a lot, NeoTechnomad. Have followed your recommendations.
* However, the columns still don’t stretch across the page, and still aren’t separated
any more than before. Perhaps I need to alter something in the CSS (or add something)?
* Also, how would I add a break between the end of one lot of columns and the beginning
of the next, please?
* Would also like more of a break between the last set of columns and the “Other
movie-related posts” heading. I’m sure this is easily done, but have tried `<
br>
` and it made no difference.
* Cheers!
Ross
* [neotechnomad](https://wordpress.org/support/users/neotechnomad/)
* (@neotechnomad)
* [10 years, 3 months ago](https://wordpress.org/support/topic/3-column-coding-for-single-page/#post-6955713)
* > However, the columns still don’t stretch across the page,
* It is because the wrapper for the page is not full-screen and you have a sidebar
on the left-hand side.
* The other question is: do you want just this page to have the 3 columns or all
pages?
* > and still aren’t separated any more than before.
* The width can be decreased and the margins increased.
* > Also, how would I add a break between the end of one lot of columns and the
> beginning of the next, please?
* > Would also like more of a break between the last set of columns and the “Other
> movie-related posts” heading. I’m sure this is easily done, but have tried
> and it made no difference.
* These are now some pretty complex changes that I think you should have a designer
who can look at the child theme and the site and code exactly what you need.
Without actually accessing your child theme, what you are asking is beyond the
scope of working from the forum.
* You could search or post at these sites for someone: [WordPress Jobs](http://jobs.wordpress.net/),
[Code Poet](http://directory.codepoet.com/), or [Upwork](https://www.upwork.com/).
* Thread Starter [RossB](https://wordpress.org/support/users/rossb/)
* (@rossb)
* [10 years, 3 months ago](https://wordpress.org/support/topic/3-column-coding-for-single-page/#post-6955743)
* Thanks for your further response, NeoTechmad.
* I want just this page to have the 3 columns. If I could make this page full-screen
and/or get rid of the sidebar just for this page, I think that’s about all I
need to do. Is it easily possible to achieve that, please?
* Now that you’ve kindly provided me with the coding I should have been using from
the outset, I think I can probably figure out a way to increase the separation
between the sets of columns, even if it’s not the optimal way. I have another
site with boxes on one page, for example, and am thinking I could simply adapt
that box coding to achieve the separation I want by having an empty, borderless
box in between the sets of columns. Can but try…
* Cheers
Ross
* Thread Starter [RossB](https://wordpress.org/support/users/rossb/)
* (@rossb)
* [10 years, 3 months ago](https://wordpress.org/support/topic/3-column-coding-for-single-page/#post-6955769)
* For the benefit of anyone who might stumble on this page looking for a simple
way to widen a specific page, I managed to do it as follows:
* First, find the ID of the page.
* Then, add the following CSS to your stylesheet:
* ```
.page-id-231 .entry-content {
max-width: 800px;
}
```
* Done!
* Now, to solve the remaining problem as per my post above – to increase the blank
space under each set of 3 columns on [the page to which I refer](http://www.boomtownrap.com/boomtown-rap-movie-reviews/).
If anyone has any suggestions, I’m all ears and gratitude!
* Cheers
Ross
Viewing 5 replies - 1 through 5 (of 5 total)
The topic ‘3-column coding for single page’ is closed to new replies.
* In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
* 5 replies
* 2 participants
* Last reply from: [RossB](https://wordpress.org/support/users/rossb/)
* Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/3-column-coding-for-single-page/#post-6955769)
* Status: not resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics