2

http://jsfiddle.net/LdTpg/3/

<div class="a">
    <div class="b">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo nunc, vehicula nec auctor a, lacinia dapibus tortor. Praesent id mi id dui sodales laoreet. Maecenas ut aliquet urna. Donec porttitor turpis eu velit viverra in tincidunt nisi viverra. Curabitur mi ligula, facilisis ut cursus vel, fermentum sit amet nibh. Ut in nisl cursus quam molestie scelerisque non a nulla. Morbi eu diam nibh, eu dictum orci. Nunc est neque, dignissim ut fermentum id, sagittis eget urna.
    </div>
    <div class="c">
        <div class="d" style="background: grey; height: 100%; width: 100%;"></div>
        <div class="e">Vertical Align This</div>
    </div>
</div>

Styles:

​.a {
    border:1px solid red;
    overflow:hidden;
}
.a div {
    display:inline-block;
}
.b {
    width:200px;
    border:1px solid blue;
    float:left;
    position:absolute;
}
.c {
    width: 100%; 
    margin-left: 200px;        
    position:relative;
}
.d {
    position:absolute;
    top:0;
    left:0;
}
.e {
    position: relative;
}

​ So basically

  • I know the width of the left div (container B) but not its height
  • The width of the right div (container C) has to take up the remaining space
  • I do not know the height or width of the outer div (container A)
  • There is an element (container D) inside the right div (container C) that must be placed under another element (container E)
  • Container D should be the same dimensions as container C
  • Container E should have text that is both horizontally and vertically center (with respect to container C)

I have tried various CSS settings including messing with the line height, display (inline-block vs block), heights/widths as %, floats...

arcyqwerty
  • 10,325
  • 4
  • 47
  • 84
  • Partial answer, but this is the direction you should head. http://jsfiddle.net/LdTpg/7/ – Simon Boudrias Aug 04 '12 at 04:05
  • Here's a possible solution (though I'm not sure I understood what you wanted for div .e). I won't post it in the answers as I don't really have the time to explain. - http://jsfiddle.net/joplomacedo/LdTpg/10/ – João Paulo Macedo Aug 04 '12 at 07:31
  • http://stackoverflow.com/questions/11070327/center-an-html-element-with-an-unknown-width-to-the-middle-of-the-screen – starbeamrainbowlabs Aug 04 '12 at 12:58

1 Answers1

3

It is unclear what the height of C should be in your information of what you desire (you do not address that).

If C is an arbitrary height

It can be done as this fiddle is configured (works in IE7+).

.a {
    border:1px solid red;
    overflow:hidden;
}
.a div {
    display:inline-block;
}
.b {
    width:200px;
    border:1px solid blue;
    float:left;
}
.c {
    overflow: hidden;       
    position:relative;
    height: 100px; /* arbitrary height */
    line-height: 100px; /* match arbitrary height */
    text-align: center;
}

.a .c {display: block;}

.d {
    position:absolute;
    top:0;
    left:0;
}
.e {
    position: relative;
    vertical-align: middle;
}

If C is supposed to match B's flexible height

It can be done as this fiddle is configured (works in IE8+; note: Chrome shows a slight variation compared to Firefox and IE on how it calculates the absolute position of the D element). This solution removes your 100% inline styling on D's width and height.

.a {
    border:1px solid red;
    overflow:hidden;
    display: table;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
    position: relative;
}
.a div {
    display: table-cell;
}
.b {
    width:200px;
    border:1px solid blue;
}
.c {     
    text-align: center;
    vertical-align: middle;
}

.d {
    position:absolute;
    top:1px;
    right: 1px;
    bottom: 1px;
    left: 203px;
}

.a .e {
    display: inline-block;
}
.e {
    position: relative;
}
ScottS
  • 71,703
  • 13
  • 126
  • 146