两个DIVS，一种流体，一种固定的，固定的div（不考虑高度）在内部具有垂直居中的元素

Question

This is as far as I got. So far I am unable to vertically centre the icon in the right DIV regardless of the height. I am also unable to get the text in the left DIV to break when it hits it's max length.

Here is what I have: http://jsfiddle.net/SpSjL/1685/

both boxes should remain the same height, if there are a few lines of text in the left, the right should adjust as well

expected:

HTML:

  <div class="container">

    <div class="right">
        <div class="someIcon"></div>
    </div> 
    <div class="left">
aaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbcccdcccccccccccccccccccccccccccccdccccccccddccccc
    </div>

</div>

CSS:

    .left {
    overflow: hidden;

    border: 1px solid #FF0000;
    /* word-wrap: break-word;
    word-break: break-all;
    text-wrap: normal; 
    white-space: normal;*/
    word-break: break-all;
}

.container {
    display: block;
    position: relative;
    overflow: hidden;
}

.someIcon {
    background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png);
    background-size: 20px;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    position: absolute;
    top: 50%:
}

.right {
    float: right;
    width: 50px;
    min-height: 50px;
    border: 1px solid #000000;
    display:table-cell; 
    vertical-align:middle;
}

Answer 1

I simplified your layout by using the background properties position attributes to keep it centered vertically and to the right. You shouldn't need to do any floating. I try and keep my layouts as simple as possible.

CSS

.container {
    border:1px solid black;
    background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png) center right 15px no-repeat;
    position: relative;
    margin: 5px;
    padding: 15px 75px 15px 15px;
}

wrapword class pulled from CSS: How do I wrap text with no whitespace inside a <td>?

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

HTML

<div class="container wrapword">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

<div class="container wrapword">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet facilisis tellus. Aliquam eu mi in augue faucibus egestas sed convallis lorem. Nulla rutrum purus ac dolor dictum viverra.
</div>

<div class="container wrapword">
    a short sentence
</div>

update : removed unecessary div, support for one really long word (although I imagine that isn't necessary) http://jsfiddle.net/SpSjL/1708/

you can adjust the padding on the background and the container to fit your image.

Answer 2

First, the icon, it's quite simple :

Remove the .someIcon element, and put the icon as a centered background of the .right div :

.right {


   background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png) center center no-repeat;
    background-size: 20px;
    float: right;
    width: 50px;
    min-height: 50px;
    border: 1px solid #000000;
    display:table-cell; 
    vertical-align:middle;
    }

The layout problem needs more time, I come with that soon.

EDIT :

Here you go :), working demo : http://jsfiddle.net/SpSjL/1709/

You have to use display: table cell; on both divs :

    <div class="container">


        <div class="left">
    aaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbcccdcccccccccccccccccccccccccccccdccccccccddccccc
        </div>
         <div class="right">
            <div class="someIcon"></div>
        </div> 
        <div class="clear"></div>
    </div>

CSS :

.left {
display: table-cell;
    margin-right: 52px;
    border: 1px solid #FF0000;
    /* word-wrap: break-word;
    word-break: break-all;
    text-wrap: normal; 
    white-space: normal;*/
    word-break: break-all;

}

.container {
    display: block;
    position: relative;
    height: 100px;
}



.right {
     background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png) center center no-repeat;
    background-size: 20px;
    display: table-cell;
    width: 50px;
    min-height: 50px;
    border: 1px solid #000000;

}

And I cleaned up all your code.

Answer 3

check this FIDDLE

Simply remove float from your right div, and place it after the left div.

Updated FIDDLE with minimal CSS

Answer 4

Well, if you know your icon is always going to be fixed in size, and you are willing to resort to absolute positioning, what's stopping you from using the negative margins?

.someIcon {
    background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png);
    background-size: 20px;
    width: 20px;
    height: 20px;
    margin: -10px;
    left: 50%;
    top: 50%;
    position: absolute;
}

Here is the updated fiddle .