Geek Answers Handbook

How to save two inline div blocks side by side, even if the second div overflows

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 apart from the first, instead of moving below the first. Please note that I cannot use a fixed width for my divs as the length of the text that will be displayed in them unknown. Then only what I know is that the text in the first div will always be short, and the text in the second can be long.

Here is a basic diagram of what I want:

 First div text Second div text stays beside the first one and wraps around still being aligned like this

Thanks everyone!

+4
source share
2 answers

Ok I finally managed to do exactly what I needed using a table with one row and two cells. The table is full width. The text of the first cell is nowrap, so it takes up all the necessary space. The text in the second cell takes up the rest of the space and wraps as needed and remains beautifully aligned.

+2
source

Elements displayed as inline-block are wrapped according to its contents and try to remain inline. The code you use does just that. When the content of the second div overflows, it increases the size to accommodate.

The correct solution to this question is to add a width element to the element.

 .divLeft { width: 150px; vertical-align: top; } .divRight { width: 400px; vertical-align: top; }

Demo

+1
source

More articles:


All Articles