CODEWITHSUNDEEP
htmlcssweb
Ella Sharakanski
Ella Sharakanski

Reputation: 2773

CSS - inline blocks side by side with 100% width

I have two blocks with text. The length of the text is not constant (user input). The left block has short text in it but the right block might contain really long text. The blocks should appear side by side and spread over 100% of the parent's constant width, no more no less.

Simplified Example: https://jsfiddle.net/hh6a03cy/1/

<div style="white-space: nowrap; font-size: xx-large;">
  <span>woohoo</span>
  <div style="display: inline-block; overflow-wrap: break-word; width: 100%; white-space: normal; vertical-align: top;">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
</div>

The problem in this solution is that there is a horizontal scroll bar because the right block takes 100% of its parent's width, but it should take less since the comulative width of the two blocks should be 100%.

Any ideas?

Thanks!

Upvotes: 2

Views: 2660

Answers (3)

Petar Toshev
Petar Toshev

Reputation: 67

Here is used javascript for dynamically setting width;

<html>
    <head>
        <style>
            #container {
                width: 100%;
                box-sizing: border-box;
                font-size: xx-large;
            }
            #left {
                overflow: hidden;
                float: left;
            }
            #right {
                float: right;
                word-break: break-all;
                display: inline-block;
                margin-left: 10px;
            }
        </style>
        <script>
            function setWidth() {
                document.getElementById("left").style.width = document.getElementById('textIsHere').offsetWidth;

                //you should include all margins for #left and #right element
                document.getElementById("right").style.width = document.getElementById('container').offsetWidth - document.getElementById('left').offsetWidth - 10;
            }
        </script>
    </head>
    <body onload="setWidth()">
        <div id="container" onclick="setWidth()">
            <div id="left"><span id="textIsHere">woohoo</span></div>
            <div id="right" >gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
            </div>
        </div>
    </body>
<html>

Upvotes: 0

Petar Toshev
Petar Toshev

Reputation: 67

CSS

.container {
    width: 100%;
    box-sizing: border-box;
    font-size: xx-large;
}
.left {
    width: 150px;
    overflow: hidden;
    float: left;
}
.right {
    width: calc(100% - 150px);
    float: right;
    word-break: break-all;
    display: inline-block;
}

HTML

<div class="container">
    <div class="left">woohoo</div>
    <div class="right">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
    </div>
</div>

white-space: nowrap; would break current result. For better div width you could use some javascript to calculate it.

Upvotes: -1

Jon Uleis
Jon Uleis

Reputation: 18649

You can accomplish this, and with much less CSS, using flexbox.

.container {
  display: flex;
}

.container div {
  margin-left: .5em;
  word-break: break-word;
}
<div class="container">
  <span>woohoo</span>
  <div>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
</div>

Upvotes: 2

Related Questions