Break letters of second child div

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.