Break letters of second child div - html

Question

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 display: inline-block or float: left 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:
Fiddle
<div class="main">
<div class="first">first</div>
<div class="value">valuevalue</div>
</div>
Right now, If I apply display: inline-block to the parent element, then it is having the width of the second child element.
To not happen this, I tried break-word, word-break css properties on the second child element but still no use.
What I am trying to get is illustrated in the following screenshot:
Some important points:
width of the parent element should be equal to the first child element.
height of the parent element should be equal to sum of all the child elements.
I don't know the width of the first child element.
(EDIT) The first child element has some fixed width and height. I don't know these values.
I want to do this using just css. css3 is welcome. (I know how to do this using javascript)

Answer 1

You can Achieve this easily with CSS3's new intrinsic and extrinsic width values(min-content in this cas), although, it's not supported on IE, so it's not an viable option but I will just post this as it's interesting that we will be able to do that in the future:
http://jsfiddle.net/S87nE/
HTML:
<div class="main">
<div class="first">first</div>
<div class="value">valuevaluevalue</div>
</div>
CSS:
.main {
background-color: cornflowerblue;
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
.first {
width: 50px; /* I don't know this width */
height: 50px; /* I don't know this height */
background-color: grey;
}
.value{
word-break: break-all;
}
I guess in the worst case you could use this for newer browsers and JS for IE and older versions.
Reference:
http://dev.w3.org/csswg/css-sizing/#width-height-keywords
http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent

Answer 2

Ideally, the layout style for a HTML snippet like:
<div class="main">
<div class="first">first</div>
<div class="value">firstvaluevalue</div>
<div class="value">second value value</div>
<div class="value">third valuevalue</div>
<div class="value">valuevalue on the fourth line</div>
</div>
is achievable using the following CSS:
.main {
display: inline-block;
background-color: cornflowerblue;
position: relative;
width: 50px;
}
.first {
width: 50px; /* I don't know this width */
height: 50px; /* I don't know this height */
background-color: grey;
}
.value {
word-break: break-all;
margin: 1.00em 0;
}
as shown in: http://jsfiddle.net/audetwebdesign/tPjem/
However, I had to set the width of .main to that of the .first element in order to get the word-break property to take effect.
The CSS rendering problem here is that you want the width of the .value siblings to be equal to the unknown width of .first, which cannot be done with CSS alone.
CSS rendering is essentially a one-pass top-to-bottom algorithm which means that parent elements cannot inherit values from child elements (tables have a multi-pass algorithm but this won't help in this case). This may change in future versions of CSS, but for the we need to design according to these limitations.
The JavaScript/jQuery solution is to get the width from .first and apply it to .main and bind that to a window re-size action.
In some ways, this problem seems to make sense if .first contains an image which would have an intrinsic height and width. If this were the case, it might make sense to set the width of .main to a reasonable value and then scale the image in .first to fill the width of the .main block.
Without knowing more about the actual content, it is hard to come up with alternatives.

Answer 3

Look at my latest comment for the Fiddle link. I changed some things in the html too. Did set the value div inside the first div to use it's width and added word-wrap to the value div.
.main {
display: inline-block;
background-color: cornflowerblue;
position: relative;
}
.first {
width: 50px; /* I don't know this width */
position: relative;
background-color: grey;
}
.first p {
margin-bottom: 30px;
margin-top: 0;
}
.value {
max-width: 100%;
word-wrap:break-word;
background-color: cornflowerblue;
}
html:
<div class="main">
<div class="first">
<p>first</p>
<div class="value">valuevalue</div>
</div>
</div>
http://jsfiddle.net/jxw4q/12/

Answer 4

Important
this answer may not be useful for you, but can help other user who have a similar problem.
you can have the same look as you desire, but without really stretching the parent height. by using position:absolute; on the second div.
Notice: if the parent don't really stretch, it causes problems.
for example, content that will come directly after the parent, will be showed after the .first element. causing an overlap.
you still can use this for cases where this is the only content in the page, and you want the second div to adjust his width to the first.
(I don't think that this is your case, but maybe it will help other user who might stumble into that question.)
anyway, I think that your only option is to use a Script.
For those who fall under the use-case I've described, Here's a Working Fiddle
HTML: (no changes here)
<div class="main">
<div class="first">First div set the width</div>
<div class="value">second fiv should wrap if bigger then first</div>
</div>
CSS:
.main
{
display: inline-block;
position: relative;
}
.first
{
background-color: gray;
}
.value
{
position: absolute;
background-color: cornflowerblue; /* moved here */
}

Answer 5

I don't think you will be able to achieve it without a little help of javascript. Imagine the the following markup and css :
<div class="main">
<div class="first content">first</div>
<div class="second content">valuevalue</div>
</div>
and then the following css :
.main{
background-color : red;
display: inline-block;
max-width: 50px;
}
.first{
background-color : blue;
}
.second{
background-color : green;
}
.content{
word-break: break-word;
}
Now all you gotta do is to set the max-width of your .main div to be equal to your first element and add the content class to each element. I suppose you are adding your elements dynamically.

Answer 6

I got the solution!!
HTML
<div class="main">
<div class="first">first</div>
<div class="value">valuevalue</div>
</div>
CSS
.main {
overflow:hidden;
width:1px;
display:table;
background-color: cornflowerblue;
}
.first {
width: 50px; /* I don't know this width */
height: 50px; /* I don't know this height */
background-color: grey;
display: inline-block;
}
.value {
word-break: break-all;
}
Working Fiddle
Related link