Somewhat complex, so please bear with me.

I'm finishing up a video game review site. Each review has a info bar, which has the name of the game being reviewed, the platforms it's on, and the score. Here's an image of what it looks like when the text fits in the various divs that make up the bar:

Good Bar

Unfortunately, I have a couple of problems:

  1. If the title is long, it will simply spill over the score area.
  2. If the platforms overrun the left-hand div, they will continue on the line below, which will not be visible.

An example:

Bad Bar

What I'd like is for both the title and platform div to expand vertically as necessary, while keeping both it and the score div centered. Here's what I have so far:

HTML:

<div id="info-bar">
    <div id="game-info">
        <div id="title-platform">
            <h1>Reallyreallyreallylongtitle</h1>
            <h4>PlayStation 3
                PSP
                XBox 360
                PC
            </h4>
        </div>

        <div id="score">
            <h2>Score:</h2>

            <img src="/Content/Images/Review/goodscore.png" alt="" />
            <img src="/Content/Images/Review/goodscore.png" alt="" />
            <img src="/Content/Images/Review/goodscore.png" alt="" />
            <img src="/Content/Images/Review/badscore.png" alt="" />
            <img src="/Content/Images/Review/badscore.png" alt="" />                                    
        </div>

    </div>
</div>

CSS:

#info-bar { width: 36.25em; height: 5.625em; margin-top: 0.938em; background-color: #e2e1e1; position: relative; }

#game-info { width: 36.25em; height: 2.8125em; margin-top: -1.40625em; top: 50%; position: absolute; overflow: hidden; }

#title-platform { line-height: 0.85; }

#game-info div { width: 17.625em; padding: 0 0.25em; float: left; }

I think I'm close. The overflow: hidden of the game-info div is probably part of the problem. I'm just not sure what to do with it. Any guidance would be greatly appreciated.

1 answer

1
point
This was chosen as the best answer

The problem is your fixed height.

overflow:hidden chops anything off that goes outside that height - take it away and set a width on title-platform and words will wrap - a really long word won't wrap though, so you'll need overflow:hidden to stop it running into the score.

Keeping them all vertically centered might be a step too far.

Answered over 7 years ago by Tony Crockford
  • title-platform already has a width given to it by #game-info div. That said, I'll play around with it some more to see if I can come up with something that looks halfway not-horrible. KevinM1 over 7 years ago