Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Web

CSS - Inline Blocks Side By Side With 100% Width

Post a Comment
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

Solution 1:

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>

Solution 2:

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>

Solution 3:

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.


Post a Comment for "CSS - Inline Blocks Side By Side With 100% Width"