ansaurus

Question

Answer 1

A:

If you have a div like this

<div class="container">
    <div class="date">today</div>
</div>

with this css fragment your date div will be positioned to the bottom right of it's container.

.container {
      position:relative;
    width: 100px;
    height: 180px;
    border: solid 1px black;
}
.date {
        bottom:10px;
        position:absolute;
        right:10px;
    }

You can verify it working here

Lorenzo 2010-10-31 19:26:20

Thanks for the sample! However I need to align the date to the left. If I do so it will overlap on the image and if I use `right:200px` to align to the right of the image, it will be too indented when there is no image.

sasa 2010-10-31 19:46:35

@sasa: if you provide more of your markup code we can try to adjust the sample accordingly. I just did it this way because I dont know your markup

Lorenzo 2010-10-31 19:48:34

ok sorry. I will show the entire code.

sasa 2010-10-31 19:53:46

ok please check my post again, I posted the code on jsfiddle

sasa 2010-10-31 20:04:08

@sasa: I can't get it to work with your markup. I am sorry for that. Maybe someone else will be able to help more on this. If was my code, I would change my requirement and put it on the right side :)

Lorenzo 2010-10-31 21:53:01

Answer 2

A:

I'm not sure what your markup is, but the easiest solution would be to have the heading, text and date all in one div (inside .entry), and float the image to the left if it's there. The date would be positioned as you have already done in your example. When there is no image, the entire div will move flush left.

<div class="entry">
  <img [...] />
  <div>
    <h2>Heading</h2>
    <p>Entry text</p>
    <p class="date">[Date]</p>
  </div>
</div>

stephenhay 2010-10-31 19:26:31

thx! I tried that but the date will position to the bottom of the div which may have more or less text. If I position it in the entry div it will always be to the far bottom but I don't know how to alter it left, if there is no image.

sasa 2010-10-31 19:44:25

To be honest, I'd just go ahead and do it your way, but use php or JavaScript to add a class when there is an image. This class can have the position from the left side via CSS. I know you wanted to avoid it, but using php of JavaScript will make it truly dynamic.

stephenhay 2010-10-31 21:01:32

Answer 3

A:

Here is what I came up with and will probably be a good jumping-off point for you. In short, wrap the two text areas in their own divs, and wrap them in a parent div. Float the parent div to the right and make it's position something other than static. If the position is static, you cannot use the position: absolute attribute with it's children divs.

<style type="text/css">
    div.entry{
        float: left;
        position: relative;
        width: 40%;
    }
    img.left{
        float: left;
    }   
    div.right{
        float: right;
        display: inline;
        position: absolute;
        height: 100%;
        width: 50%;
    }   
    div.topRight{
    }   
    div.bottomRight{
        position: absolute;
        bottom: 0px;
    }   
</style>




<div class="entry">
  <img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/&gt;
  <div class="right">
      <div class="topRight">
          Some stuff
      </div>
      <div class="bottomRight">
          Some other stuff
      </div>
  </div>
</div>

Hersheezy 2010-10-31 20:38:04

ansaurus

tags:

views:

answers:

Positioning to bottom of dynamic div

related questions