CSS Element over another on right bottom corner

Hey
I need to position an Icon OVER the right bottom corner of an other CSS element, but with variable height and width. So just absolute positioning would not work.

I have something working with tables:

Expand|Select|Wrap|Line Numbers

 <table width="100%"><tr>

    <td>

        < HERE IS THE MAIN ELEMENT />

    </td><td></td></tr><tr><td></td>            

    <td style="width:1px;">

        <div style="position:relative;">

            < HERE IS MY ICON style="position:absolute; top:-30px; left: -30px;" >            

        </div>

    </td></tr>

</table>

It should look like something like this:

Expand|Select|Wrap|Line Numbers

 
*******************

*                 *

*                 *

*                 *

*                 *

*             *** *

*             *   *

*             *   *

*******************

This works, but it's ugly...
Any better ideas?

Jul 24 '07 #1

Subscribe Post Reply

5088

drhowarddrfine

7,435

Expert 4TB

Why wouldn't abs pos work?
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8">

<style type="text/css">
html,body{height:100%;width:100%;
margin:0;padding:0
}
div{
position:relative;
height:200px;
width:200px;
outline:1px solid red;
}
img{
position:absolute;
height:20%;
width:20%;
right:0;
bottom:0;
}
</style>

</head>
<body>
<div>
<img src="1.png">
</div>
</body>
</html>

[/HTML]

Jul 24 '07 #2

tburger

As long as the desired element is located inside the div whose corner you want to cover, drhoward's suggestion will work.

Even at a variable heights and widths, if you position the "corner element" absolutely with its bottom and right attributes set to 0, it will stay right where you want it...

Tom

Jul 24 '07 #3

rblaettler

Awesome, that really fixed it. Never even thought of that approach.
Thanks a lot guys.

Jul 25 '07 #4

Similar topics

Position relative to parent element

by: Markus Ernst | last post by:

Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following...

HTML / CSS

Text in bottom right corner - a better way?

by: mercurius_1 | last post by:

I want to put text for a copyright notice into the bottom right corner of my page. When I say "bottom right," I mean that it will float there regardless of how the browser window is resized. I...

HTML / CSS

Why won't my element stick to its corner?

by: Tristan Miller | last post by:

Greetings. Here is the scenario: I have an element div.aside which is absolutely positioned in the bottom right corner of its containing box, div.frame. Said containing box is then resized...

HTML / CSS

Getting (and setting) a style value from a element that use a class

by: Michael Bierman | last post by:

Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does...

Javascript

adding an element

by: Sheri Orloff | last post by:

After using a 3-column template from Ben Meadowcroft which I like the looks of, I need to add an element but don't know how to do it. On the right side of the page...

HTML / CSS

Bottom-right corner

by: Andre Majorel | last post by:

How do you align an <imgagainst the bottom-right corner of an enclosing block so that the text in the block flows around it ?  <p> En ce qui concerne la conjoncture...

HTML / CSS

position right bottom corner

by: zybernau | last post by:

Hi everyone, how to find the position of the right bottom corner of the screen i need to design a form and make it display in the right bottom corner , this should work even in various...

Visual Basic 4 / 5 / 6

position of an element relative to the page

by: steven acer | last post by:

i'm illiterate when it comes to javascript and browser issues, i'm trying to code a small help module for my java app.i've went far enough coding all the server side but i'm stuck with javascript...

Javascript

How to display a resize handle in the bottom right corner of a form

by: JB | last post by:

Hi All, I'd like to display a "resize handle" in the bottom right corner of a form like in the windows explorer for instance (the 3 diagonal lines in the corner). Can anybody tell me how to do...

Visual Basic .NET

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++