2

I have the following jsfiddle that has text that could be any length on one side and then I have a box on the other side. Because the text can be any length, the height of .container is unknown.

I am trying to figure out how to make the .box-container always a square if the height is always 100% of the .container.

I know the padding-bottom:100% trick but that is only if you know the width and it doesn't matter what the height is. I don't know the width (nor do I care what it is), but I do know the height is going to be 100% of the container. I just need to somehow adjust the width to always be the width of the height of the box and then adjust the .text-container so it doesn't overlap.

In short: I need .box-container to ALWAYS be a square ratio but also ALWAYS have 100% height of .container

I hope that makes sense. Any guidance would be appreciated.

HTML

<div class="container">

    <div class="text-container">
        <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
    </div>

    <div class="box-container">

    </div>

</div>

CSS

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.container { border-radius:3px;box-shadow: 0px 4px 8px rgba(130, 130, 130, 0.25);position:relative; }

.text-container { overflow:hidden;padding:25px;width:70% }

.box-container { position:absolute;right:0;top:0;width:30%;height:100%;background-color:#F9F9F9;padding:20px;}
bryan
  • 8,879
  • 18
  • 83
  • 166

1 Answers1

-1

You can't do this with only css! Use this jQuery code:

var boxContainerH = $('.box-container').height();
$('.box-container').width(boxContainerH);

https://jsfiddle.net/4eob6fty/51/

HoomanMns
  • 153
  • 12