3 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

I need some help.
I just can't figure out how to glue an IMG element to the bottom right corner of a DIV container.
Here's the example

<html>
<head>
<link media=screen href="main.css" type="text/css" rel="stylesheet"
</head>
<body>
<div id="boxes">
<div id="box1" class="boxType">Text</div>
<div id="box2" class="boxType">
<div class="text">Sampe text blah blah</div>
<img class="formButton" src="button.gif"/>
</div>
<div id="box3" class="boxType">Text</div>
</div>
</body>
</html>

Here's the css

#box1, #box2, #box3 {
float left;
border 1px #CCCCCC solid;
width 180px;
height 150px;
}

.formButton {
float right;
position relative;
bottom 10px;
}

Using this unfortunately will position the image after the text element, using position absolute will position it to the bottom of the BODY.

Anyone has any suggestions?

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 16 years 10 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

glue image to bottom

try...

{
position: absolute;
bottom: 0px;
right: 0px;
}

...and add "position: relative" to the containing div, as...

"A relatively positioned box establishes a new containing block for normal flow children and positioned descendants."
[Reference].

A Pedant Writes...
Into the mountain,
I will fall.

Anonymous
Anonymous's picture
Guru

glue image to bottom

Thanks,
this solution works great in IE6, but in Mozilla 1.4 the image is positioned relative to the BODY element still.

Here's the updated CSS

#box1, #box2, #box3 {
position relative;
float left;
border 1px #CCCCCC solid;
width 180px;
height 150px;
}

.formButton {
position absolute;
bottom 0px;
right 0px;
}

I tried to configure the outer container ("boxes") to be also relative, with this

#boxes {
position relative;
}

Now in Mozilla the button is aligned to the top of the page...

Any ideas?

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 16 years 10 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

glue image to bottom

I'm not sure about having position: relative and float in the same class - perhaps you could try adding another div inside box2 which has position: relative...

<div id="box2" class="boxType">
  <div style="position: relative">
    <div class="text">Sampe text blah blah</div>
    <img class="formButton" src="button.gif"/>
  </div>
</div>

A Pedant Writes...
Into the mountain,
I will fall.