Ivan Ivan - 2 months ago 6
CSS Question

How to align two divs (one fixed and the other with break word attribute)?

I'm having problems with the attibute "word-wrap:break-word;" when trying to align horizontally with another DIV and its inside a DIV. Easy to understand my problem seeing this two examples:



#container {
height: auto;
overflow: hidden;
}
#left {
background-color: green;
width: 120px;
height: 20px;
overflow: hidden;
}
#right {
width: calc(100% - 120px);
float: right;
height: auto;
display: inline-block;
word-wrap: break-word;
background-color: red;
}

<div id="container">
<div id="right">AAAAAAAAAAAAAAAAAAAAA</div>
<div id="left"></div>
</div>





http://jsfiddle.net/galacticpower/a3nyxhtj/4/

Here, if the navigator is resized, the right div text is broken as needed! Yeah!

Adding a div inside the right div and its style comes the problems...

#inside_right{
width: auto;
display: inline-block;
word-wrap:break-word;
background-color: yellow;
}

<div id="container">
<div id="right">
<div id="inside_right">AAAAAAAAAAAAAAAAAAAAA</div>
</div>
<div id="left"></div>
</div>


http://jsfiddle.net/galacticpower/a3nyxhtj/3/

Here if the navigator is resized the "word-wrap:break-word" attribute is lost. The text is not broken! I need to apply some style in a div inside the right div without losing this behaviour.

To summ up, I want that the words were broken in the second example...

Any ideas?

Thank you so much!

Answer

Simply apply max-width: 100% to force the letters to actually break inside the inline-block #inside_right

#container {
    height: auto;
    overflow: hidden;
}

#left{
	  background-color: green;
    width: 120px;
    height: 20px;
    overflow: hidden;
}

#right{
  width: calc(100% - 120px); 
  float: right; 
  height: auto;
  display: inline-block; 
  word-wrap:break-word;
  background-color: red;
}

#inside_right{
  width: auto; 
  display: inline-block; 
  word-wrap:break-word;
  background-color: yellow;
  max-width: 100%;
}
<div id="container">
    <div id="right">
      <div id="inside_right">
         AAAAAAAAAAAAAAAAAAAAA 
      </div>
    </div>
    <div id="left"></div>
</div>
	

Comments