Help with a CSS problem

Discussion in 'Web Design and Development' started by ppc_michael, Jul 2, 2007.

  1. ppc_michael Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #1
    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
     
  2. benneh macrumors member

    Joined:
    Oct 20, 2006
    #2
    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.
     
  3. ppc_michael thread starter Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #3
    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?
     

Share This Page