Databases
StackOverflow2013
Postsdbo
POStack two divs LTR-horizontally when 2nd div may have loooong strings
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStack two divs LTR-horizontally when 2nd div may have loooong strings
    text
    copied!<p>Use-case seems to be trivial, but I could not make it work as need. I need to position 2nd div with all its content at the right side of the 1st div. When string is long enough it wraps to the second line with all combinations of the CSS attributes I've imagined to try: <img src="https://i.stack.imgur.com/uybYO.png" alt="Wrong behaviour"></p> <p>Notes:</p> <ul> <li>I do not know height of the content of these div and therefore cannot set fixed height to them as well as to the parent/container</li> <li>I can set fixed with to 1st div and actually want it to take the whole left part (from top to bottom)</li> <li>Actually, the thing i want is 'plain old' horizontal table with two cells, but without &lt; table > tags.</li> </ul> <p>Here is the <a href="http://jsfiddle.net/TdXrv/" rel="nofollow noreferrer">jsfiddle</a> and sample text I've tried. Typical solution with floats work well while 2nd div does not contain long strings:</p> <p>HTML</p> <pre><code>&lt;div class="container1 clearfix"&gt;&lt;div&gt; &lt;p&gt;first 1&lt;/p&gt; &lt;p&gt;first 2&lt;/p&gt; &lt;/div&gt;&lt;div&gt; &lt;p&gt;second 1&lt;/p&gt; &lt;p&gt;second 2&lt;/p&gt; &lt;p&gt;second second second second second second second second second second second second &lt;/p&gt; &lt;p&gt;second 4&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>.clearfix:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } div { outline: 1px solid red; } div &gt; div:nth-child(1) { outline: 1px solid green; } div &gt; div:nth-child(2) { outline: 1px solid orange; } .container1 { overflow: hidden; } .container1 &gt; div { float: left; height: 100%; /* display: inline-block; */} .container1 &gt; div:nth-child(1) { width: 80px; } .container1 &gt; div:nth-child(2) { } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload