Image at the Bottom

[dragonusthei]

Hello.

 

I have a div that is the main content box.

 

Inside this div i have 2 images in divs.

 

Image and div 1 must sit at the top of the content box - No problems here.

 

Image and div 2 must always sit at the bottom of the content box - heres the problem.

 

I cannot get the image to stay at the bottom of the div regardless of the size of the content box.

 

I have tryed postion abolsute with bottom set to 0 but this sends it to the bottom of the page and not the div.

 

In the same way if i use margin-top: 100% it sends it to the bottom of the page as does padding.

 

Solutions?

[dbrimlow]

You need to show us a sample of the html and css code that you are using.

 

There are many easy techniques for positioning images, but each depends on the settings of ids and classes around them.

 

The easiest is to set the background image of the id or class itself, ex:

 

#content {background: #000000 url(images/someimage1.jpg) top left repeat-x}

#content1 {background: #000000 url(images/someimage2.jpg) top left no-repeat}

#content2 {background: #666666 url(images/someimage3.jpg) bottom right no-repeat}

 

Of course, setting the containers properly is crucial and, again, each impacts on how the other is positioned.

 

An absolute positioned container can be forced to stay relative to another container (and not the browser window itself), but your results is what leads me to believe you have general layout issues.

[dragonusthei]

http://www.niche-hair.co.uk/test.html

 

is the file.

 

The line in he box should be at the bottom making 4 corners.

[sinus]

Having looked at your site I believe the image you are having issues with this the horiztonal line

thats near the top and should be at the bottom.

You would actually be better using css to style the complete div rather than images

 

#padded_content {border: 5px solid #FFFFFF; background-color: #111111; padding-top: 10px; padding-left:5px; padding-right: 5px; padding-bottom: 10px;
width: 500px; height: 500px;}


<!-- the only code you would need in the html would be -->
<div id="padded_content">
<h1>Location</h1>
</div>


<!-- The bottom div with the image for the base of content area is not needed.  -->

 

The css above is not the correct dimensions and colours for your site,you can play around with it

and add other style features. But it will give you a 500 x 500 box with a black (change the colour to suit)

content area and white border with a little padding at the side to keep the text off the border.

 

You can play around with it until you get the dimensions and colours you need.

Also you will need to test with different browsers as IE and firefox do not handle some css in the same

way.

 

 

[dbrimlow]

Well, along the idea of what sinus dais, I would just make a border for #contentbox and lose the image ids - why add to the page weight and download time with graphics when color will do it easier?

 

Try this, add the following to to #contentbox:

 

"border: 3px solid #FFFFFF"

 

In the html markup, remove the 2 divs ids for content_box_top_image and content_box_bottom_image (they are, at the moment, not even present in your css anyway).

 

The border performs the same function.

 

You just have to tweak the id's margin/padding and  width, and height relative to the border size, for example, use width:478px; height:386px; because you added 3px solid border to the id (which made it wider and higher).