Help with HTML columns
-
I’m a total noob with HTML so please take it easy on me :-)
I recently used some HTML to create columns in a post. All is well until I go to the page and see that the columns (particularly the left) is off-center from the inline text of the post. I’ve played with the width and padding values of the HTML and can’t seem to figure it out.
I would like for both columns to be displayed/in-line with the blog post text. Please help! Thank you!
The blog post is “Accepted Collateral”
The blog I need help with is: (visible only to logged in users)
-
-
Your site is private so I cannot answer you. Volunteers cannot view private blogs and we Volunteers do not request access to them. Therefore, I do not know which theme you have and what you have done. Staff can view private blog content and I typed modlook into the tags in the sidebar of this thread for their assistance. Be patient while waiting for a response and subscribe to this thread so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.
-
-
It still witness a private site. Be patient while waiting for Staff help, please.
P.S. You do not need to create a table to have 2 columns in posts or pages. See https://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/
But if you do want to create HTML tables see http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/ -
Hi there,
Have you thought about using the built-in grid that comes with this theme? You still need a little HTML, but it helps everything line up beautifully and keeps everything responsive.
Can I recommend giving it a try instead of what you’re doing now?
https://corporatethemedemo.wordpress.com/docs/the-grid/ -
I remember reading about the grid, but wasn’t quite sure on how that worked exactly. I tried some of the HTML code from the demo for “sixes” and it put everything back into a single column. Im not even sure if I’m implementing that correctly.
As of now I’ve tried timethief’s way from the first link, and the alignment of the text is still off when I view the webpage. In the post editor, everything seems to be aligned correctly with the paragraph text.
-
@yaboitone sixes should display in one or two columns, depending on your site width. I’d suggest fours with your content. Here’s a sample.
Now, I will note this hangs left of the “main content” like it does in the demo:
https://corporatethemedemo.wordpress.com/docs/the-grid/Is that what you’re hoping to fix?
-
I agree with you, fours was the better way to go with the content. The fact that it hangs so far left of the “main content” is definitely what I’m hoping to fix. If theres is in fact a way to fix that.
-
Sure. That’s not the content hanging off the edge, it’s the other content having big spaces added to its sides. If you want to take away all of that extra space, try this:
.single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>h1, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>h2, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>h3, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>h4, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>h5, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>h6, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>p, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>dl, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>ul, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>ol, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>address, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content form, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-footer, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) #comments, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>.edit-link, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .page-links, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .image-navigation, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>.sharedaddy, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .entry-content>.jetpack-video-wrapper, .single-column-content:not(.page-template-full-width):not(.page-template-front-page) .widget-area { padding: 0 0; } -
The CSS you provided did the trick! Thank you so so so so much. There is absolutely no way I would have figured this out without your help! You’re a lifesaver!
-
You bet, @yaboitone . You’ll likely want to go through the site a bit and make sure that didn’t negatively affect anything, since it’s pretty broadly applied. But it’s really just removing extra padding around the sides of content that isn’t in columns, so as long as that’s fine you should be good to go.
-
Most of what I’ve seen so far hasn’t been affected by the code. I will keep my eye on it for sure as I do more post. More than likely I will be using more columns in future post, so this helped tremendously. Thank you!
-
I am struggling with two aspects of tables – column width and putting colour into the first row.
This is the coding I have for four rows and two columns. The first row is merged across two columns. The table has colour but I am wanting to make the first row a different colour as well as having different column widths. I have reduced the size of the table to 80% of the space available.
<tbody>
<tr>
<td style=”text-align: center;” colspan=”2″>Heading</td>
</tr>
<tr>
<td>Great grandparent</td>
<td>John Joe</td>
</tr>
<tr>
<td>Grandparent</td>
<td>Paddy Mac</td>
</tr>
<tr>
<td>Parent</td>
<td>PJ</td>
</tr>
</tbody>
</table>Any enlightenment would earn my undying gratitude!
Thanks. -
-
Hi @catherineandalex, try using “th” for your table header rows. You can also specify a color via the style.
To indicate column widths based on your own specifications instead of on the content, try using table-layout as outlined here.
If you need more help, since @yaboitone’s thread is mostly resolved, do you want to go ahead and start a new one? You can add a “modlook” tag if you’d like. The advice in this thread mainly applies to the Corporate theme.
-
Hi supernova. Thanks for the prompt reply. I can create the column width when I don’t have a header but the header seems to be mucking things up.
As suggested I have created a new tread and put my latest attempt there.
Thanks -
- The topic ‘Help with HTML columns’ is closed to new replies.
WordPress.com Forums 