two DIVS, one fluid, one fixed, fixed div regardless of height has vertically centered element inside

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: enter image description here

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

How about for icon centering: http://jsfiddle.net/SpSjL/1686/ (replace -webkit-transform with cross-browser transform implementation). — Samuli Hakoniemi, Mar 11 '14 at 16:53
Can you please make it clearer what you are trying to achieve? JSfiddle doesn't really help. — Andrei Nemes, Mar 11 '14 at 16:54
@AndreiNemes eveo added an image to the post that shows the goal. — TylerH, Mar 11 '14 at 16:55
Was able to center icon with jquery and removing absolute position http://jsfiddle.net/SpSjL/1691/ — Mykle Nero, Mar 11 '14 at 17:07
How has everyone gotten this wrong so far? Nobodies right icon DIV stretches vertically, aligning with the red box. Yet to find a useable answer... — eveo, Mar 11 '14 at 17:21
I know they say don't use tables unless you have tabular data, but have you considered trying that as a temporary hack? That should enable you to make the two sections the same height. See this for help on making them expand height together: http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height — TylerH, Mar 11 '14 at 17:21

score 2 · Accepted Answer · edited May 23 '17 at 10:33

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.

Why did I not think of that? Genius, works perfectly. Thanks. — eveo, Mar 11 '14 at 17:43
Sorry, had to give someone else the green mark due to needing this to work with fontawesome. http://jsfiddle.net/SpSjL/1710/ — eveo, Mar 11 '14 at 20:33
Any way to make the arrow float to the right all the time while remaining inside the parent div? http://jsfiddle.net/SpSjL/1712/ — eveo, Mar 11 '14 at 20:47
http://jsfiddle.net/SpSjL/1713/ I'd advise against using table cells for layout unless you're actually working with tables. — clueless_user, Mar 11 '14 at 21:17

enguerranws · Answer 2 · 2014-03-11T18:35:15.403

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.

This doesn't seem to keep the div with the icon aligned to the right; it pushes it to a new line of the left div gets too big — TylerH, Mar 11 '14 at 18:22
Sorry, I didn't update the fiddle : here it is > http://jsfiddle.net/SpSjL/1709/ (and I updated my answer) — enguerranws, Mar 11 '14 at 18:34

T J · Answer 3 · 2014-03-11T17:43:01.407

1

check this FIDDLE

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

Updated FIDDLE with minimal CSS

edited Mar 11 '14 at 17:43

answered Mar 11 '14 at 17:05

T J

42,762
13
83
138

The boxes do not stretch dynamically, they have a fixed height. They must both depend on the amount of text in the left. – eveo Mar 11 '14 at 17:19
@eveo well, it does stretch, check by adding/remove content to the div. – T J Mar 11 '14 at 17:26
I didn't downvote you, but can you make the icon centered horizontally within the div as well as vertically? – TylerH Mar 11 '14 at 18:56
@TylerH it's done in the updated fiddle.. plz check the second fiddle – T J Mar 11 '14 at 19:10
Actually, it should remain 100% width if the text is short too...http://jsfiddle.net/SpSjL/1712/ – eveo Mar 11 '14 at 20:46

score -1 · Answer 4 · answered Mar 11 '14 at 17:03

-1

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.

answered Mar 11 '14 at 17:03

Andrei Nemes

3,062
1
16
22

No, everyone so far has made this error. Both boxes do not stretch based on the left one. They must both be the exact same height, with vertically positioned elements within. – eveo Mar 11 '14 at 17:20

two DIVS, one fluid, one fixed, fixed div regardless of height has vertically centered element inside

4 Answers4