CSS: just can't figure this out!

Hello,
This is my first time posting in a help forum anywhere, I am just so stuck with this CSS compatibility issue (Firefox and IE 6 display issues).

here is the html:

<div id="bios">
<div class="biocell"><img src="./bios/adrien100.png" alt="adrienne"><div class="bioin"><span style="padding-top:45px"><a href="bios/bios.php#a">Adrienne</a> </span></div></div>
<div class="biocell"> <img src="./bios/pete100.png" alt="pete"> <div class="bioin"><a href="bios/bios.php#p">Pete</a></div></div>
<div class="biocell"><img src="./bios/scott100.png" alt="scott"> <div class="bioin"><a href="bios/bios.php#s">Scott</a></div></div>
<div class="biocell"><img src="./bios/rob100.png" alt="bob"><div class="bioin"><a href="bios/bios.php#b">Bob</a> </div></div>
</div>

that piece of code is inside the following:

<div id="page">
<div id="mid">
.
.
above code
.
.
</div>
</div>

here is the relevant CSS:

#page { color: #ccc; margin-right: auto; margin-left: auto; width: 740px; clear: both }

#mid { margin-right: auto; margin-left: auto; width: 740px}


/*BIOS*/

#bios{

float: right;
height: 450px;
background-color:#33CC33;

}

.bioin {
background-color: #666666;
height: 98px;
width: 190px;
float: right;
vertical-align: middle;
line-height: 98px;
}

.bioin a { display: block; height:98px; width:190px;}

.bioin a:link, .bioin a:visited {
text-decoration: none;
color: #FFFFFF;
}

.bioin a:hover {
background-color: yellow;
color: #000000;
}

.bioin a:active {}


Ok, I hope that was enough and displays properly on this forum.
The issue can be found by going to:
chaoscontrolrocks.com

In Firefox (only tested it in v2) it displays fine, in IE 6, the bottom DIV breaks out of it's parent DIV and goes under the band picture (jumps out of left DIV, and goes under right DIV [2 column layout]).

You can see the DIV in question, as it's background is currently green.
I have really nit picked this apart a ton. The issue occurs regardless of the number of DIVs (ie, I only use 3 band members, opposed to 4). It occurs on any of the last cells in the column (so if I switch band member row 3, with row 4, that last DIV always breaks it's box and floats left.

any help would be awesome,
thank you

seth

 

.biocell {width:100%}

Tell me if I solved the problem

pd: you have to be more clean in your code, dreamweaver has a command for formating and your css can be reordered here http://cleancss.com/.

bye

 

thank you, I will try adjusting the width of that div to %100 tonight when I'm working on this site, I'll report the results back right away.

I am totally on the same page with you about cleaning up the code. It's a page I'm doing really quickly, just as a favor, I was telling a friend that I was embarrassed showing the code/link due to same!

Thanks again for your comment.

 

I changed the width property to 100%, issue is still present :-(

I definitely welcome more suggestions, thank you for that one.

This problem is so weird, I feel like the answer could be so obvious, I am just missing it.

 

A live preview would help alot more.

 

cool, thanks for taking a look.

it's @, chaoscontrolrocks.com

godaddy does something strange so you might want to check it out @:

http://www.discodev.com/chaoscontrolrocks.com/index.php

-the problem area has the green background.
-once again, the issue is with IE 6

and as previously stated, I know the code isn't optimal, but it's just something I threw together as a favor.

thanks again.

 

Put this at the bottom of the bios div:

<span style="clear:both;width:100%;line-height:0;font-size:0;"></span>

 

@ vimF:

Thank you, I added the span. I can't check it out right now in IE, but will later, and let you know. It didn't change the look in Firefox, so that is good.

Thanks again

 

@ VimF:

IT WORKED!

Thank you very much for your help. I don't believe I would have figured that out. I really do appreciate your time in offering your suggestion.

Thank you to anyone else who took a look at it.

Seth