2

Unluckily I don't know what to do :( example

I want to align the text "bla bla...." at the bottom of the left div.

Setting it as position:absolute & bottom=0 doesnt work always because there are cases where image does not exist, and that would be a problem as if the text wont increase container div height...

I could change the layout if there is no img with php but that doesnt guarantee that in case img has less height than text, text overflow etc...

I know this is strange, the table is the only solution I have?

alex
  • 479,566
  • 201
  • 878
  • 984
GorillaApe
  • 3,611
  • 10
  • 63
  • 106
  • A previous Discussion on this: http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom-with-css – Gregg B Nov 10 '10 at 01:52

3 Answers3

3

A table is rarely (if at all) a good solution for layout.

You could do a min-height so if the img does not exist, you will always have a height that will be adhered to.

alex
  • 479,566
  • 201
  • 878
  • 984
  • Yes but i cant be sure of the textheight as it can be more than one line – GorillaApe Nov 10 '10 at 01:49
  • @Parhs Well `min-height` allows the box to expand in height once over the threshold specified. – alex Nov 10 '10 at 03:07
  • Maybe what Parhs means is resulting same height between text and image wrapper. – Jeaf Gilbert Nov 10 '10 at 08:07
  • Accepted because i finnaly did this solution... Set a min height with !important hack of ie6... – GorillaApe Nov 10 '10 at 19:14
  • Well it isnt a solution because it doesnt work well with the !@# IE6... setting css min-height and using height:auto !important height:2.8em for the browser regards height as max height:( – GorillaApe Nov 15 '10 at 14:13
  • @Parhs Are you sure you are [doing it right?](http://www.dustindiaz.com/min-height-fast-hack/) – alex Nov 15 '10 at 23:00
  • Yes... This works but in this case it doesnt i dont know why...Removing the fixed height ie6 expands ,but when there is no image would be a problem.. – GorillaApe Nov 16 '10 at 03:42
1

You can use display:table-cell.

http://jsfiddle.net/JeaffreyGilbert/32NWh/

Jeaf Gilbert
  • 11,495
  • 19
  • 78
  • 105
0
<style type="text/css">

div#leftContent { float : left; position : relative;}
div#rightContent { float : right; position : relative;}
.bottom { position : absolute; bottom : 0; }

</style>

This is a rough Stylesheet emulating your skeleton; combined with something like...

<div id="leftContent">
<p class="bottom">Your text, as a 'p' element--but it could be any element.</p>
</div>
<div id="rightContent">
<img src="" />
</div>

Your <p> element (or any element for that matter) would be positioned at the bottom of the left div, wherein you could change the padding/positioning to whatever you'd like; this still allows you to style the image in the adjacent div anyway you'd like.

jlmakes
  • 2,945
  • 1
  • 26
  • 38