Help with a CSS problem

[ppc_michael]

http://telecasters.msu.edu/goodlook/ (page)
http://telecasters.msu.edu/goodlook/style.css (CSS)
http://telecasters.msu.edu/goodlook/?nocss (page without CSS applied, in case you care)

In the black part of this (very incomplete) design, I would like the two lines of text (Comcast Local and RHA TV) more or less centered on either side of the show logo in the middle. I would also like to to stay centered as the browser is resized (text wrapping on either side is okay).

It's kinda-sorta okay, but very hacked together, at larger browser widths. But as you make the browser smaller, the right side text disappears (moves down into the white part of the page). In fact, in Mozilla, both lines are always in the white.

How can I accomplish what I want? What am I doing wrong?

Thanks

 

[benneh]

Because you have the .copy class as floats, so the div "header" doesn't really wrap around the two floats (.left, .right).

Try adding this line
<div style="clear:both; height:0px;"></div>
after to the two .copy classes, and before closing the "header" div.

 

[ppc_michael]

Thanks, I've added that line to the source. The text doesn't go into the white but it still moves under the image. I still want to guarantee that the text stays on either side of the image at all times.

I suppose I could just increase the min-width of the wrapper but I'd like to have a more solid solution, not just a hack.

Also, the "The ShoW" image will change to something wider, so I need the code to be flexible with the center image's width.

Am I even approaching the problem correctly by floating them left/right like that?