Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Columns in another table with the same width

columns

Image to better explain the problem.

What I’m trying to do is make the columns in the second section the same as the first. So far, I’ve achieved this by adding 13% padding to the left and right sides of the section and setting the correct width in percentages for each column, although I’ve had problems with it because it was automatically setting the wrong percentages to fill 100% of the section.

The content is in "infobox".

If I don’t set padding in section, it looks like this:
columns_without_padding

I know there has to be a better way to achieve the same result. Any ideas?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    @DCR, your solution convinced me to use additional columns, but I gave them 12.5%. So... the top table has 4 columns with 25% width each, and the bottom has 5 columns with the width with following percentages: 12.5%, 25%, 25%, 25%, 12.5%.

    This way the width of the ones at the bottom is identical to the ones at the top.

    |   25%    |   25%    |   25%    |   25%    |
|12,5%|   25%    |   25%   |   25%    |12,5%|

    Thanks.


  2. 0 
    .container {
  display: flex;
  width: 80vw;
  margin: 0 auto;
  justify-content: space-between;
  border: solid 1px green;
  text-align: center;
}

.full {
  border: solid 1px red;
  width: 100%;
}

.half {
  border: solid 1px blue;
  width: 50%;
}
    <div class='container'>
  <div class='full'>1</div>
  <div class='full'>2</div>
  <div class='full'>3</div>
  <div class='full'>4</div>
</div>

<div class='container'>
  <div class='half'></div>
  <div class='full'>1</div>
  <div class='full'>2</div>
  <div class='full'>3</div>
  <div class='half'></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search