Positioning div vertically

Question

I got something like this:

enter image description here

Solution right now:
fixed height and negative top-value.

Now I want to position the red box vertically in the parent div, but it must be flexible, because there are options that might extend the red box with one or two more text-rows.

Sizes are 840x300px and the code right now is:

HTML:

<div class="large-16 columns item">
<div class="box">
  <div class="image"><img src="system/html/band_test1-f5641934.jpg"></div>
  <div class="data red">
    <h1><a href="www.google.de" title="headliner" target="_blank">SEHR LANGER BANDNAME AHOI</a></h1>
    <h2><a href="" title="venue" target="_blank"></a></h2>
    <p class="date">So, 28.07.2013</p>
    <p class="supportbands">+ <a href="" title="Test Support" target="_blank">Test Support</a>  </p>
  </div>
</div>
</div>

CSS:

.showsblock .item {
    height: 300px;
    margin-bottom: 20px;
}

.box .image img {
    border: 1px solid #a2a2a2;
}
.box .data {
    background: url('../show_bg_black.png') repeat;
    display: inline-block;

    position: relative;
    top: -165px;
    left: 1px;

    padding-right: 10px;
    min-width: 290px;

}

This isn't very flexibel. When I add one more row into the red div, it expands but isn't centered anymore. Do you have an idea?
Also, I think there might be a better solution for the "image" div.

thank you.

Where's the css for the data red? – designtocode Jul 16 '13 at 12:32 — designtocode, Jul 16 '13 at 12:32
Red ist just a red background png. Nothing important. Sry – Marek123 Jul 16 '13 at 14:36 — Marek123, Jul 16 '13 at 14:36

score 4 · Answer 1 · answered Jul 16 '13 at 12:59

4

I would suggest position: absolute

DEMO http://jsfiddle.net/kevinPHPkevin/kKWUH/2/

div.data {
    position:absolute;
    top:0;
    bottom:0;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
    height:150px;
}

This will vertically align the div centrally. You can padding the top to bring it down a little etc.

answered Jul 16 '13 at 12:59

Kevin Lynch

24,427
3
36
37

Looking good but what happens when I add 1-2-3 rows of text? It seems that the "data"-box doesn't extend, does it? – Marek123 Jul 16 '13 at 14:40
I've added a height of 150px that's why. You could change this to another number or auto etc – Kevin Lynch Jul 16 '13 at 14:51
When I changed it to auto, it goes the full height of the parent div. I just need it to the last row of the data-div. Do you have an idea? – Marek123 Jul 16 '13 at 14:53

otinanai · Accepted Answer · 2013-07-16T15:06:57.157

1

I suggest using CSS tables (e.g display:table-cell) and vertical-align:middle.

See this demo

EDIT

Place the image in absolute position and the text container in relative position. Same principle for vertical alignment with CSS tables.

Updated demo

edited Jul 16 '13 at 15:06

answered Jul 16 '13 at 13:18

otinanai

3,987
3
25
43

Good Idea, but I cannot put the image into the CSS code. It will be generated dynamically. – Marek123 Jul 16 '13 at 14:43

Positioning div vertically

2 Answers2