Break the letters of the second child div

Question

I have one requirement when I need to apply a width to a parent that is equal to the width of the first child. This can easily be achieved with display: inline-block or float: left for the parent if it has only one child. But I have more than two children in a div. Something like that:

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, then it has the width of the second child.

To prevent this from happening, I tried the break-word , word-break css properties in the second child, but still not needed.

What I'm trying to get is illustrated in the following screenshot:

Some important points:

• the width of the parent must be equal to the first child.
• the height of the parent must be equal to the sum of all the children.
• I do not know the width of the first child.
• (EDIT) The first child has a fixed width and height. I do not know these meanings.

I want to do this using only css. css3 is welcome. (I know how to do this with javascript)

Answer 1

You can easily achieve this with CSS3 new internal and external widths (min-content in this case), although it is not supported in IE, so it is not a viable option, but I will just post it, since I wonder what we can do this is 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 think in the worst case, you can use this for new browsers and JS for IE and older versions.

Link:

• 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 the HTML fragment, for example:

 <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> 

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 the image: http://jsfiddle.net/audetwebdesign/tPjem/

However, I needed to set the .main width as the .first element in order to get the word-break property in order to take effect.

The problem with CSS rendering here is that you want the .value sibling width to be equal to the unknown .first width, which cannot be done with CSS alone.

CSS rendering is essentially a one-pass top-down algorithm, which means that parent elements cannot inherit values ​​from child elements (tables have a multi-pass algorithm, but this will not help). This may change in future versions of CSS, but for this we need to develop in accordance with these restrictions.

The JavaScript / jQuery solution is to get the width from .first and apply it to .main and bind it to the window resizing action.

In a sense, this problem makes sense if .first contains an image that has an internal height and width. If that were the case, it would be wise to set the .main width to a reasonable value, and then scale the image in .first to fill the width of the .main block.

Without knowing more about the real content, it’s hard to find alternatives.

Answer 3

Check out my last comment on the Fiddle link. I also changed something in html. Set the div value inside the first div to use its width and added word wrap to the div value.

 .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

Attention! this answer may not be useful to you, but it may help another user who has a similar problem.

you can have the same appearance as you, but without stretching the parent height. using position:absolute; in the second div .

Please note: if the parent is not really stretched, it causes problems. for example, content that comes immediately after the parent will be displayed after the .first element. causing overlap.

you can still use this for cases where this is the only content on the page and you want the second div to adjust its width to the first.

(I don’t think this is your business, but maybe it will help another user who may stumble on this issue.) Anyway, I think your only option is to use Script .

For those who fall under the use case that I have described, here is a working script

HTML: (no change 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 do not think that you can achieve this without a bit of javascript support. Imagine 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 you need to set the maximum width of your .main div to the first element and add a content class to each element. I suppose you add your elements dynamically.

Answer 6

I got a 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 script

Related Links