0

Using CSS only, if you <div>Some dynamic text</div>, how do you make the height and width of the div equal dimensions when the width is determined by the dynamic text?

Derek Story
  • 9,518
  • 1
  • 24
  • 34
  • I see plenty of questions/answers on how to set equal dimensions using css only, but none that are based on the dynamic content. I have provided an answer in hopes that it will help someone else that ran into the same issue as myself. – Derek Story Mar 27 '17 at 15:09
  • Post some more code please or probably create a fiddle with the problem statement perhaps. Thanks – Gurtej Singh Mar 27 '17 at 15:12

2 Answers2

2

Similar to setting equal height based on the known width as answered here: https://stackoverflow.com/a/6615994/2479962

You first contain the dynamic text within a container and add a margin pusher (in this case :before) above the dynamic text element:

JS fiddle

<div class="container">
    <div class="element">
       Dimensions set by content.
    </div>
</div>

The trick is to base .element:before's margin off the dynamic contents font-size and padding:

CSS Only:

.container {
    display: inline-block;
    position: relative;
    background-color: silver;
}
.element {
    font-size: 20px;
    padding: 10px;
    /* So we don't have to take line-height into consideration during calc() */
    line-height: 1; 
}
.element:before {
    content: '';
    display: block;
    /*  100% is for 1:1 aspect ratio */
    /* 20px is taking the contents font-size plus the padding on each side */
    margin-top: calc(100% - 20px);
}

With @Rounin's suggestion, we can vertically center it using both :before and :after and dividing the calculations by two:

JS Fiddle - Vertically centered

.element:before, .element:after {
  content: '';
  display: block;
   /*  100% is for 1:1 aspect ratio */
   /* 10px is taking the contents font-size plus the padding on each side/2 */
    margin-top: calc(50% - 10px);
}
Community
  • 1
  • 1
Derek Story
  • 9,518
  • 1
  • 24
  • 34
  • 1
    Very clever. +1. To vertically center the text, we can place one `.dimension-setter` above `#element` and one below and update the style declaration to: `margin: calc(50% - 20px) 0;` – Rounin Mar 27 '17 at 15:32
  • 1
    Great idea. Fiddle using your suggestion: http://jsfiddle.net/dAebS/582/ – Derek Story Mar 27 '17 at 15:37
2

You can place a single paragraph element inside a div and give the p a margin using calc() which takes into account the width of the div (because % is always based on the width of the parent element).

Working Example: 

div {
display: inline-block;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
padding: 6px;
}

p {
margin: calc(50% - 12px) 0; /* half the width minus half the line-height */
font-size: 18px;
line-height: 24px;
}
<div>
<p contenteditable="true">Click me &amp; edit to change div size.</p>
</div>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • Hmmm... I thought this was even simpler than yours, @DerekStory, but on second thoughts, comparing the two, it ends up looking very similar. Say if you'd prefer me to delete this alternative and I'll be happy to oblige. – Rounin Mar 27 '17 at 16:09
  • 1
    I really like this and think it is a bit more straight forward. I'll keep both just for a reference, but marking yours as the correct answer and +1. – Derek Story Mar 27 '17 at 16:11