How to keep two inline-block divs side by side even if second div overflows
Question by Gilles jr Bisson
I have the following html and css code :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
div.container
{
width: 600px;
border: solid 1px black;
}
div.divLeft
{
display:inline-block;
border: solid 1px red;
color: red;
}
div.divRight
{
display:inline-block;
border: solid 1px blue;
color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="divLeft">
<p>1 - Some short text</p>
</div>
<div class="divRight">
<p>Some not too long text with the div besides the first one.</p>
</div>
</div>
<div class="container">
<div class="divLeft">
<p>2 - Some short text</p>
</div>
<div class="divRight">
<p>Some very long text that will eventually wrap because it is so long and when it wraps is when the trouble starts because the div moves down instead of staying besides the first one.</p>
</div>
</div>
</body>
</html>
In the second case, is there a way to keep the div besides the first one instead of it moving below the first one. Note that I can not use fixed width for my divs as the length of the text that will appear in them in unknown. Then only thing I know is the text in the first div will always be short and the text in the second one may be long.
Here is a basic diagram of what I would want :
First div text Second div text stays beside the first one
and wraps around still being aligned like this
Thanks all !
Answer by Gilles jr Bisson
Ok. I finally manage to do exactly what I needed with the use of a table with only one row and two cells. The table takes the whole width. The text of the first cell is nowrap so it takes up all the space it needs. The text on the second cell takes up the remainder of the space and wraps as it needs and stays nicely aligned.
Answer by Starx
Elements displayed as inline-block wraps according to its contents and tries to remain inline. The code you are using does exactly this. When the second div’s content is overflowing it increases the size to accommodate.
The proper solution to this, is to add width to the element.
.divLeft { width: 150px; vertical-align: top; }
.divRight { width: 400px; vertical-align: top; }
