I dont want absolute positioning to overlap the next element

HTML & CSS
1

I’m not as stupid as this subject sounds, please hear me out Eye-wink

I’m trying to place text over an image with CSS. Simple enough with position:absolute, but the content is dynamic so I’m never sure whether there is an image or not. If the isn’t I don’t want the following text to be overlapped. I also don’t know the heights of either element.

This is what I’ve got:


<div id="a">
	<div id="b">
		<h2></h2>
		<img />
	</div>
	<div id="c">
		<p></p>
	</div>
</div>

I want the <h2> to overlap the <img> if its there but I don’t want <div c> overlapped if there is no <img>

Can anyone please please help me figure this out. I’ve tried everything and looked everywhere with no success.
Thanks

2

I’m sure lots of people could help you, but probably not the ones who hang in the How to buy a website sub-forum…

3

oops. how do i change the category or remove this?

4

I’ve reported your post, it should be moved shortly.

5

did you try giving div b a min-height rule in css? It just says the div can stretch dynamically with the content but will stop shrinking at a certain height.

Note that min-height doesn’t work in ie6 and earlier… if that’s important to you.

You could also try a conditional in your script that generates your content. What are you using to generate the content?

6

Done

7

Why do you want to use absolute positioning? Using the correct margining and padding will give you a MUCH better effect.

8

Just give a min-height to the containg div of the img and paragraph and give the image a position:relative;z-index:1; and give the paragraph a position:absolute;top:0;left:0;z-index:2;

9

i dont understand how i would use margin and padding to overlap the text and img. i cant give the img a neg margin cause there might not be text to overlap it or the text might run multiple lines.

to the rest of the suggestions, thanks. i’ll try figure it out on monday. the min-height thing not working in ie6 is important since that one of the browsers we need to support.

10

In IE6 it doesn’t support min-height. However it treats the height property just the same as min-height and will expand to fit (though overflow must be reset)


* html #element/*targets iE6*/
{
  overflow:visible;/*resets it*/
 height:20px;/*min-height:20px; and will expand*/
}
11

Hi,

It depends on your exact criteria but this works.

http://www.pmob.co.uk/temp/text-over-image.htm


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.b img {
    float:left;
    margin-right:-100&#37;;
}
.c {
    clear:both
}
</style>
</head>
<body>
<div class="a">
    <div class="b"><img src="images/zimg4.jpg" width="300" height="300" alt="example image" />
        <h2>This is the h2 text that should be on top of an image as requested if the image is present</h2>
    </div>
    <div class="c">
        <p>Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : </p>
    </div>
</div>
<hr />
<div class="a">
    <div class="b">
        <h2>There is no image present and the text just stacks up normaly as required without any overlap.</h2>
    </div>
    <div class="c">
        <p>Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : Following text that must not cover up any of the content above : </p>
    </div>
</div>
</body>
</html>
12

thanks guys i got it working!