HTML Forum

**numbenator** · 05-31-2005, 06:59 AM

Hi all,

I have 2 divs,
<style>
#main { position:relative;
width:400px;
height:300px;
top:0;
left:0px;
}

#photo { position:relative;
right:0px; top:0px;
height:100px;
background-color:#cccccc;
}
</style>
<div id="main">
sample text here sample text here sample text here sample text
here sample text here sample text here sample text here sample text here
<div id="photo"></div>
</div>

My problem is this :

I don't want the text to show behind in the child div photo.
How do i do this.

cheers

Steve

**praveen** · 05-31-2005, 11:36 AM

Quote:

don't want the text to show behind in the child div photo.

what exactly are you looking at doing?

it doesnt show "behind".. infact it shows above the photo..

wat browser u r using?

**numbenator** · 11:53 AM

Ok sorry,

I dont want the text to be behind or in front. When text reaches the edge of the photcell, i want it to auto wrap to the next line and NOT show anything behing or infront of. I suppose i should have specified a width 100px as well.

cheers

**chrishirst** · 05-31-2005, 02:08 PM

something along the lines of this Photo Gallery layout ?

**numbenator** · 05-31-2005, 03:40 PM

No. Not as such.

This is the page im working on.

http://www.mastech-solutions.com/Kin...stimonials.htm

You see the photo is a quarter of the size that the text take up and there more text that can be shown in the heights worth of the image.

Ive had to define the text in each testimonial within 2 divs. This isn't practical when the text is coming from CMS as it will be one content and not split in two to enable rendering in divs.

**chrishirst** · 06-01-2005, 04:26 AM

setting a float:right on the image should work

Code:

#main img {
position:relative;
float:right;
margin:0px 2px 10px 10px;
}

**numbenator** · 06-01-2005, 05:03 AM

This now places the box after the text and doesnt position it in the top right of the screen. I dont want the picture to change position after the text has been placed.
The text must overflow arround the picture and the down the page.

**chrishirst** · 06-01-2005, 09:16 AM

If the picture is in the child div (#photo) you will need to make the child div float right instead.

**numbenator** · 06-01-2005, 09:34 AM

thats what I am doing and as you said i should od in your previous response. It leaves the imgDiv, at the end of the text.
This just doesnt work how your suggesting.
Heres the code i thin kyou are suggesting,
<style>
#main { position:relative;
width:400px;
height:300px;
top:0;
left:0px;
}

#photo { float:right;

height:100px;

background-color:#cccccc;
}
</style>
<body>

<div id="main"> sample text here sample text here sample text here sdfgfggfdg
ample text here sample text here sample text here sample text here sdfgfggfdg
ample text here sample text here sample text here sample text here sample text
here dfgfdg dfg dfjkhdf kfg klhfd h ldfg kldfghsample text here sample text here sample text here sample text
here dfgfdg dfg dfjkhdf kfg klhfd h ldfg kldfghj jfdk fhdj
<div id="photo">image here</div>
</div>

You notice if you run that the box just slips to the base of the text

**chrishirst** · 06-01-2005, 10:01 AM

Yes, which is exactly what it should do, because that's where it is in the document flow. If you want it at the top it will have to be before the text in the flow.

You can of course take objects out of the flow with position:absolute; but this means they will be unaffected by other objects and conversely other objects will not be affected by them, which is why the text will go "behind" the image.

**numbenator** · 06-01-2005, 10:05 AM

Thanks for your time. Thats exactly what I want to do and thought we were talkaing about. Obviously the box will be at the bottom of text in the flow of things however as I said in my oriiginal topic and laters ones with a link showing example of whaere , I wish the image to remain in the top right of the container cell.

I know I can position absolute. however this will not work ion the over schem of the page. ( i think)

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!