0

So, here's the skinny...

I have a page that has a list as display:table-cell. As the width of the browser resizes, the contents (anchors) of the lists may wrap to 2 lines. The problem is the anchors that don't wrap to 2 lines aren't staying 100% height.

CSS...

.home .pushes ul {display:table;}
.home .pushes ul li {display:table-cell; vertical-align:middle; width:25%; background-color:#e5a015; color:#ffffff;}
.home .pushes ul li a {display:block; padding:4em 0; padding:4rem 0;}

So, the height of <li> should be determined by the height and padding of <a>. But, since it's <display:table-cell>, the height is determined by the tallest <a>.

Ok, so just set a {height:100%;}. But, then, the anchor doesn't keep the padding. So, just set li {height:160px;} or something. But, then the anchor isn't vertically-centered. So, just set li {line-height:160px;}. But, then the anchor is huge when it wraps to 2 lines.

So, what is a guy to do?

I could do li {display:inline-block;}. But I want all the boxes to be the same height.

JJ

Edit...

HTML included for posterity...

<ul>
    <li>bleh</li>
    <li>bleh</li>
</ul>

JJ

Edit 2...

The anchor background color is what isn't growing the full height of its parent.

Note the bottom 4 boxes

I didn't realize that I could upload an image. Thanks for the tip.

JJ

doubleJ
  • 1,190
  • 1
  • 16
  • 29
  • You should edit your post and make it more clear what is going on. Maybe even adding HTML to go with the CSS... – richardaday Oct 07 '12 at 03:37
  • Well, it's a simple list, but I've added some HTML for you. Of course, a quick look at the page (resizing as described) would identify the problem. Feel free to tell me how to make it more clear (it seemed pretty straight-forward to me). – doubleJ Oct 07 '12 at 19:34
  • I think the fact that this has 0 answers right now implies it's a little confusing. I tried again to figure out what the problem was and couldn't figure out the problem. Which list are you talking about on your site? The one that has the "Featured Series", "Upcoming Events", etc? When I resize the window I see it go into 2 rows and I can't see what the problem is. Can you add pictures of the area that is wrong, and maybe even a picture of how you want it to look? – richardaday Oct 07 '12 at 20:12
  • Updated... Thanks for bringing up the image idea. As mentioned, adjusting the width of the browser to the point that any text wraps to a second/third line would have produced the results. – doubleJ Oct 08 '12 at 00:29
  • Finally figured out what you were talking about. My answer is below. In the future you really do need to improve how you ask your questions (Even after the image I had to spend 10 minutes to figure it out). Good luck! – richardaday Oct 08 '12 at 02:40
  • Just updated my JS approach to a more efficient solution – richardaday Oct 08 '12 at 04:14

1 Answers1

3

The best way of fixing this problem would be to use position: relative and position: absolute.

Example:

li {
  position: relative;
}

li a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

However, the above does not work because your li is using "display: table-cell;" and position: relative is not defined for table cells (See: Using Position Relative/Absolute within a TD?).

Therefore, your only choice is to use Javascript to get this done. There are many solutions but here is one:

Use the jQuery resize method (http://api.jquery.com/resize/) to keep track of when the window resizes. When the window resizes modify the anchor tag's padding so that it continues to cover the entire space.

Community
  • 1
  • 1
richardaday
  • 2,814
  • 1
  • 22
  • 17
  • That does work, wonderfully (the `position:absolute` part). `display:table-cell` wasn't necessary, that was just the best way that I knew to allow word wrapping and keep everything even width/height and vertically-centered. Now, I just need to play with margins and widths and everything should be ship-shape. – doubleJ Oct 08 '12 at 19:01