Adjust box to accomodate text

• 

  cynthiakirk · Member · Jan 21, 2014 at 1:59 am

  • Copy link
  • Add topic to favorites

  Designsimply helped me create the three boxes I have on each of my main pages, and told me about the “overflow: hidden” command so that my type doesn’t run over the box at the bottom.

  Now I’m wondering if there’s a way to dynamically adjust the box to accommodate the text? On my mac in Firefox the type appears to be too long for the box (even though on other browsers it seems too small). I just want to make sure everyone can see all the text no matter what browser they’re using. Can anyone help?

  The blog I need help with is: (visible only to logged in users)

• 

  hfzrhmn · Member · Jan 21, 2014 at 2:23 am

  • Copy link

  If you remove the overflow:hidden and add a padding to the bottom, that should remove the issue of your type running over the box.

  So I suggest the following CSS instead:

  .box1, .box2, .box3 {
      margin-top: 20px;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      float: left;
      width: 28%;
      height: 220px;
      padding: 2%;
      padding-bottom: 30px; // Edit this number if you want less/more space at the bottom between text and border
  }

  Generally, as the boxes’s heights are set to be the same, you will either need to alter their height to accomodate your text (as in Firefox Mac), or alter your copy so they don’t get too long.

• 

  hfzrhmn · Member · Jan 21, 2014 at 2:24 am

  • Copy link

  Also I checked on Firefox Mac and I saw nothing wrong. Can you also add a screenshot of what you see? http://en.support.wordpress.com/make-a-screenshot/

• 

  cynthiakirk · Member · Jan 21, 2014 at 4:47 am

  • Copy link

  Thanks, I will try this! Maybe I’m the only one seeing the overflow since others have said they don’t see it either. Perhaps deleting cookies would help…

• 

  justpi · Member · Jan 21, 2014 at 7:06 am

  • Copy link

  Now I’m wondering if there’s a way to dynamically adjust the box to accommodate the text?

  Yes.
  If you didn’t want the vertical borders, you would simply remove the height and the overflow from the CSS, and enclose all the HTML designsimply gave you in a div to create the horizontal borders. Then the bottom border would show below the longest text no matter what the text or the browser or the device.
  But since you want vertical borders, you need different HTML: you need table coding. Do you know how to do that?

• 

  cynthiakirk · Member · Jan 22, 2014 at 9:53 am

  • Copy link

  Unfortunately no, but thanks for the help! I think I’m going to leave it as is for now.

• 

  justpi · Member · Jan 22, 2014 at 11:32 am

  • Copy link

  Oh it’s easy. The HTML in the Text editor would be this:

  <table class="threeboxes">
  <tbody>
  <tr>
  <td>
  CONTENT1 HERE
  </td>
  <td class="middle">
  CONTENT2 HERE
  </td>
  <td>
  CONTENT1 HERE
  </td>
  </tr>
  </tbody>
  </table>