CSS positioning question

[jhedges]

I've been scouring the web and this site, but haven't found an answer that works for me. I have a fighter bio page with two divs at the top side-by-side. One holds bio information and the other holds a photo. Below that, I have a div with a the guy's fight history that is pulled from the database.

The spacing is off when there isn't a photo though. I would like the bottom div to sit directly below the two top divs. However, everything I've tried besides absolute positioning puts the fight history directly behind the bio information. See the image at the bottom of this post to understand what it looks like. I added borders to the divs just to illustrate the spacing. They will be removed once the problem is solved.

Is it possible to do what I want here?

I'm pretty new to CSS positioning and I've learned a lot from the examples and tutorial links posted here. But, I just can't figure this one out.

Here is the code I am using for the div's. Any input would be greatly appreciated.

#leftcontent
{
position: absolute;
left:10px;
top:8px;
width:220px;
padding:2px;
background:#fff;
border:1px solid #000;
font-size:8pt;
font-family:arial;
}
#rightcontent
{
position: absolute;
left:230px;
top:10px;
width:300px;
background:#fff;
border:1px solid #000;
font-size:8pt;
font-family:arial;
}
#recordcontent
{
position: absolute;
left:10px;
top:200px;
width:90%;
background:#fff;
border:1px solid #000;
font-size:8pt;
font-family:arial;
}

http://www.ufighting.com/images/news/test.jpg

[cg9com]

so, basically when there is no picture you want the bottom box to move up to the bottom of the top boxes?
absolute positioning may not be the best way to go about this then.

[jhedges]

Yeah, that's exactly what I want. I tried a number of different methods, with relative positioning and couldn't get it to work right. Everything with relative would put the bottom box behind the other two.

[Catman]

Have you tried floating the boxes? You'd need to use clear on the bottom box to force a wrap, but that shouldn't present a problem except with MacIntosh IE 5.

[jhedges]

Got it. Where I was screwing up was that I didn't change all the divs to absolute positioning. I was only doing the bottom one.

Not sure what you mean about the clear for the last div though. Do you mean like <br clear="all"> ?

[jhedges]

Cool. Everything is working. My above post caused problems in Netscape 7 (everything as relative positioning). I took out the position:relative; and everything seems to work get in IE, Netscape, and Mozilla.

Appreciate the help!

[cg9com]

Originally posted by jhedges
Everything with relative would put the bottom box behind the other two.

dont know exactly what you are saying, but it could have something to do with your z-index:*; this attribute decides what will display first second third ect. for example, a div with a z-index of 2 will display over a div with a z-index of 1 if positioned over eachother

glad everything worked out okay.

[jhedges]

Yeah, I didn't say that too well. What you're talking about is not what I was trying to achieve. I wanted three boxes all shown totally separate from each other (as opposed to laying over top of each other). But, when I changed that one div to relative positioning, it moved it up on the page, covering up the other two divs.

dont know exactly what you are saying, but it could have something to do with your z-index