CSS - Forcing Image To The Bottom

Hi all,

I've got a <div> tag around an image and in Firefox, it shows an extra 2 pixels of padding at the bottom of the image - Why is that and how can it be stopped? There's no blank spaces between the <div> and <img... tags.

I have two images at the top of a paragraph, one floating left, the other, right. I would like the right floater to go to the *bottom* of the graph. Below is a truncated version of the graph and the CSS style sheet I created, trying, unsuccessfully, to bottom the image. (The image remains at the top.) I validated my current document (which doesn't have this floatrightbottom in place yet.) The document validated as CSS level 2.1 !

<p><img class="floatleft" src="FreddieWAud110x130.jpg" width="110" height="130"><img class="floatrightbottom" src="SherpWithAward113x109.jpg" width="113" height="109" style="vertical-align=-25px">In 1990, FG conceived Movies Junior introducing movie theatre ... (Toni Honors are given annually for theater accomplishments not eligible in established Toni Award categories.)</p>

.floatrightbottom {
float: right;
margin-top: 6px;
margin-right: 0px;
margin-bottom: 6px;
margin-left: 15px;
padding: 2px;
border: 4px solid #666;
vertical-align: text-bottom;
}

I have a logo which I would like always positioned at the bottom of a div.

Does anyone know a way of achieving this?

http://www.willisemail.co.uk/skill/

The logo is in the bottom right hand corner.

Cheers

Jemes


/* Site Holder Start */
#box {
width: 750px;
margin: 0px auto;
padding: 0px;
text-align: left;
border: 1px solid #979696;
background-color: #FFFFFF;
background-image:url(../Images/mid.jpg);
}
/* Site Holder End */


/* Site Holder Start */
#box2 {
margin-left: 49px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
text-align: left;
background: #ccc url(../images/img_MainWhiteBg.jpg) repeat-y 50% 0;
}
/* Site Holder End */


/* Content Start */
#content {
width: 461px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/* Content Start */
#content2 {
margin-left: 14px;
margin-right: 15px;
margin-top: 0px;
margin-bottom:0px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/*Right Menu Start*/
#right {
width: 178px;
padding:0px;
float:right;
background-color:#FFF;
overflow: hidden;
}

#right2 {
margin-top:0px;
margin-left:14px;
margin-right:14px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}

.RightMenu {
margin-top:10px;
padding: 0px;
font-size: 13px;
color: #6884AE;
font-weight: bold;
}

.RightMenu ul
{
padding: 0px;
margin: 0px;
list-style-type:none;
}

.RightMenu li {
background-image: url(../images/img_Li_Image.jpg);
background-repeat: no-repeat;
background-position: 0em;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 1px;
padding-left: 14px;
margin-top:5px;
}

.imgTitle {
text-align:center;
margin-top: 13px;
margin-left:0px;
margin-right:0px;
}
/* Right2 Menu End */

.imgRight {
text-align:center;
margin-top: 10px;
margin-left:0px;
margin-right:0px;
border: 1px solid #979696;
}

.imgMain {
text-align:center;
margin-top:10px;
border: 1px solid #979696;
}

.Menu {
margin-top:10px;
padding: 0px;
}

.Menu ul
{
padding: 0px;
margin:0px;
list-style-type:none;
}

.Menu li
{
display: inline;
list-style-type:none;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 1px;
padding-left: 0px;
margin:0px;
}

.Main {
padding:5px;
border: 1px solid #979696;
margin-top:8px;
margin-bottom:10px;
}


.Cove{
margin-top:15px;
text-align:center;
}

I want to be able to position an image at the very top of a cell/div/container/whatever and one at the very bottom. It's too bad there is no float:top and float:bottom. Something like this

[HTML]

<div style="background-color: red">
<img src="images/top.jpg" style="?" />
<img src="iamges/bottom.jpg" style="?" />
</div>

[/HTML]

Hi

I'm trying to figure out how to postion an Image at the bottom left of a <DIV> container.

Can someone supply an example style class defintion which will place an Image at the bottom left of the div container..

I presently have:

<div>
<h2>Heading 2</h2>
<p>My paragraph text goes here and goes on for a line or so</p>
<img class="bottomleft" src="button.gif" alt="button" />
</div>

.bottomleft {
position: relative;
bottom: 0px
left: 0px
}

But this places the Image relative to the end of the <p> tag not relative to the <div>

How can I position the Image relative to the botom left of <div> tag?

Thanks
David

Hello

Trying to position an image at the bottom of my webpage which:

a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for)
b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do)
c) I can layer divs on top of

so far this is as close as I've got:

in the html

<!-- container for site info -->
<div id="container">

<!-- other content in divs here -->

<!-- other content in divs here -->

<!-- footer for bottom image -->
<div id="footer">

<!-- footer details, who / when / copyright -->
<div id="footerdetails">
details here
</div>
<!-- footer details, who / when / copyright -->

</div>
<!-- footer for bottom image -->

</div>

and in the css

#container
{
position: absolute;
top: 0px;
width: 750px;
height: 100%;
}

#footer
{
position: absolute;
bottom: 0px;
height: 230px;
width: 750px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

#footerdetails
{
position: relative;
margin: 0px 0px 0px 0px;
padding: 9px 0px 10px 70px;
top: 195px;
width: 680px;
text-align: left;
voice-family: "\"}\"";
voice-family:inherit;
}

I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this?

Thanks in advnace.

a+
gar

In the main page here, there look to be 2 columns.
How can I align all the smaller images with the bottom of the big image?
Sometimes there are 3 photos, sometimes there are 6.
At the moment it looks like it is all in divs.
Is there a way to do it in CSS with the current code.
The HTML looks a bit messy:
http://www.truly organic foods.com/cashew-cacao-cluster-275g.php

I've got a div (picright) within a div that has an image with a border. The border works, but for some reason there's a teeny tiny gap between the bottom of the image and the border. (At least on a Mac using FF.)

.picright {
float: right;
border: solid 1px #9F7A47;
margin: .3em .3em .5em .5em;
padding: 0;
}

Then I thought maybe I needed a rule for the img, so I added

.picright img {
margin: 0;
padding: 0;
}

but that didn't fix it.

Any guesses?

IE is adding 8-10px of padding to the bottom of a div that I am placing a background-image in. It renders fine in ff, but because I am trying to match 3 parts of an image up to make one whole (I have reduced margin and padding to 0 on all 3 divs) there is this white gap between the divs?!

Any ideas?

Hi,

I have a div layer, and I have set the background colour of this layer to purple. Now the height of this image various according to it content. However I would like that the bottom part of the image is made from a faded image. So far I have accomplished this by using an external image. However I would like to use the background: url(...) in CSS instead. Is this possible? Can I repeat an image only at the bottom part of a div in CSS?

Thanks and Regards,
Sim085

Hi,

I have a table in my website and i want in one column to place an image at the bottom of it (and stay there when the height of the table changes). The column already has a repeated background image.

Thanks

Please view: http://www.archanix.com/aib/about/

Notice the red square aib logo towards the bottom of the page. I have been successful in aligning the image to the bottom of the div. But because I'm using position:relative; bottom:72px; it pushes my footer down farther than I want.

Any way i can get around that? Any help would be greatly appreciated.

Thanks,

Jesse

i am trying to use CSS to position an embeded .swf rotating cube so that it is always at the bottom of a webpage and is unaffected by scrolling. i've managed to make it start out at the bottom but it always scrolls up with the scroll bar.

i realize ie6 has trouble with fixed postioning, so i was wondering if anyone had any ideas on how to get around it without using javascript?

here's my page:

http://www.myspace.com/marx0i0

and here are some examples of what im trying to do:

http://bonrouge.com/test/fixed.htm
http://www.howtocreate.co.uk/fixedPosition.html

finally, here is my code:

<embed allowScriptAccess="never" allowNetworking="internal"
SRC="http://www.geocities.com/marx0i0/untitled.swf" HEIGHT=200 WIDTH=200 STYLE= "position: absolute; center:0px; bottom: 0px; overflow: auto;" WMODE= "transparent">

thanks very much for any help!

Hi all. This is my first time posting ever so please be gentle.

On my website I have background image with stripes and grey.
I want it to go all the way down the bottom of the page.
Currently the background image stops where the content ends.
I have tried height:100%; and that solves the problem, but creates another if the user has a smaller browser window.

Can someone please help me out?

Page URL: leannemarie.com/testing_index.php
CSS: leannemarie.com/css/testing_main.css

Thanks
LeAnne