Databases
StackOverflow2013
Postsdbo
POBreak letters of second child div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBreak letters of second child div
    text
    copied!<p>I have one requirement, where I need to apply width to the parent element which is equal to the first child element's width. This can be easily achieved using <code>display: inline-block</code> or <code>float: left</code> to the parent element if it has only one child element. But I have more than two child elements in a div. Something like this:</p> <p><strong><a href="http://jsfiddle.net/venkateshwar/jxw4q/" rel="nofollow noreferrer">Fiddle</a></strong></p> <pre><code>&lt;div class="main"&gt; &lt;div class="first"&gt;first&lt;/div&gt; &lt;div class="value"&gt;valuevalue&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Right now, If I apply <code>display: inline-block</code> to the parent element, then it is having the width of the second child element.</p> <p><img src="https://i.stack.imgur.com/apuOc.png" alt="enter image description here"></p> <p>To not happen this, I tried <code>break-word</code>, <code>word-break</code> css properties on the second child element but still no use.</p> <p>What I am trying to get is illustrated in the following screenshot:</p> <p><img src="https://i.stack.imgur.com/58B4D.png" alt="enter image description here"></p> <p>Some important points:</p> <ul> <li>width of the parent element should be equal to the first child element.</li> <li>height of the parent element should be equal to sum of all the child elements.</li> <li>I don't know the width of the first child element.</li> <li>(EDIT) The first child element has some fixed width and height. I don't know these values.</li> </ul> <p>I want to do this using just css. css3 is welcome. (<em>I know how to do this using javascript</em>)</p>
 

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