Position elements top and bottom against a variable height image - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Position elements top and bottom against a variable height image

martal

2:04 pm on May 18, 2008 (gmt 0)

10+ Year Member

This looks like it needs to be done with position: relative but I don't know enough to make it work. Can someone help me out?

I have an image. I want some text or another small image to appear to the left of the image, at the top. And some more text (it's an address, made up as a dl, but a couple of test paragraphs should do) to appear at the bottom left of the image, so that regardless of the number of lines in the address, it always pushes to the bottom, flush with the bottom of the image.

And the image may be 200 x 150, or 150 x 200, or slightly different.

Doctype is XHTML Strict.

The markup:

<body>
<div id="mainWrapper">
<div id="leftWrapper">
<div id="leftTop">
<p>test top</p>
</div>
<div id="leftBottom">
<p>test bottom 1</p>
<p>test bottom 2</p>
</div>
</div>
<div id="rightWrapper">
<img src="images/test1.gif" />
</div>
</div>
</body>

-------------
and the CSS:

* {
border: 0;
margin: 0;
padding: 0;
}

body {
text-align: center;
font: 80% Verdana, Arial, Helvetica, sans-serif;
}

#mainWrapper {
width: 400px;
margin: 0 auto;
margin-top: 20px;
text-align: center;
}

#leftWrapper {
float: left;
}

#leftTop {

}

#leftBottom {
vertical-align: bottom; /* I know this doesn't work */
}

#rightWrapper {
float: right;
}

I've tried all sorts of combinations of position: relative, top: 100%, bottom 0 etc, but I'm just floundering!

Any ideas would be greatly appreciated.

Setek

2:22 am on May 19, 2008 (gmt 0)

10+ Year Member

Umm I think I get what you're trying to do... here's what I'd do:

Set
```
#mainWrapper
```
to
```
position: relative;
```
-- it will be the "stage" for the props
Set
```
#leftTop
```
to:
```
position: absolute;
top: 0;
```
-- it will sit 0 pixels from the top edge, relative to its relatively positioned parent
Likewise, set
```
#leftBottom
```
to be absolutely positioned, this time with a
```
bottom: 0;
```
Now, this means everything has been taken out of the natural document flow (two absolute-relatively positioned elements, one floated element,) so
```
#mainWrapper
```
has no children, thus a height of 0 pixels. Clear the float so the parent has height again, I'll show you a simple method but if you have a preferred one (I like :after + zoom personally) go for it.

To clear:
Put this

<div>

before the ending element for

#mainWrapper

<div class="clear">&nbsp;</div>

CSS

div.clear { display: block;
clear: both;
visibility: hidden;
height: 1px;
overflow: hidden;
font-size: 1px; }

So,

#mainWrapper

should be the height of the image in

#rightWrapper

, and

#leftTop

and

#leftBottom

should be sitting at the top and bottom of

#mainWrapper

respectively.

Play around with widths (remembering that the absolute-relatively positioned elements will take up the amount of space available -- it will overlap your float,) and whatever else you think is necessary.

Let us know how you go.

martal

5:35 pm on May 22, 2008 (gmt 0)

10+ Year Member

That worked first time, 100%, Setek. Thanks. And I learnt some more theory.

I thought setting the horizontal spacing would be straightforward, but no way.

Margins, padding -- no effect on the absolutely positioned elements.

So I just set a right after the top/bottom. That justifies any content to the right, regardless of its width.

The image doesn't have an absolute position, it can take a right margin.

I started with the separate div.clear to clear, then looked up the :after method. Used that, and it works in the IEs, and I didn't need zoom.

First class.

Setek

10:31 pm on May 22, 2008 (gmt 0)

10+ Year Member

Glad to help :)

By the way... the

:after

method doesn't work in IE 6 or 7, they don't have support for the pseudoclass.

However, the IEs have a funny way of automatically enclosing their floated children as long as the parent has hasLayout triggered. I think hasLayout gets triggered here in this instance at the

position: relative;

marker but I forget.

You can find this out by getting the Developer toolbar for IE 6 and 7. Inspect the element, and there will be a "property" that says "hasLayout".

Just some info in case you were wondering why the IEs don't work with the

:after

pseudoclass at some later stage, when you thought it did before.

martal

5:47 pm on May 26, 2008 (gmt 0)

10+ Year Member

Thanks for the follow-up.