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
Solution 1:
You can accomplish this, and with much less CSS, using flexbox.
.container {
display: flex;
}
.containerdiv {
margin-left: .5em;
word-break: break-word;
}<divclass="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>functionsetWidth() {
document.getElementById("left").style.width = document.getElementById('textIsHere').offsetWidth;
//you should include all margins for #left and #right elementdocument.getElementById("right").style.width = document.getElementById('container').offsetWidth - document.getElementById('left').offsetWidth - 10;
}
</script></head><bodyonload="setWidth()"><divid="container"onclick="setWidth()"><divid="left"><spanid="textIsHere">woohoo</span></div><divid="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
<divclass="container"><divclass="left">woohoo</div><divclass="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"