3

I have a container with two child elements (prev/next links). The labels of the prev/next links are different lengths, but I need both of the links to be the same width on the page. Each of the links should be the width of the widest element, but no wider. The pagination container should expand as needed, but should not be the full width of the page, if the text of the links does not require it. The text of the links may change, so I can't set a fixed width on them.

Here's what I have so far: http://jsbin.com/kukucusabecu/1/edit?html,css,output What I want is for the "Next" link to be the same width as the "Previous" link, without using fixed widths as the text of the links will be variable.

I have searched SO and all I have found that is relevant is this: Make Two Floated CSS Elements the Same Height However, that's talking about making two elements the same height, not the same width. I do not want to use a table for this, as this is not table data!

Community
  • 1
  • 1
Peter Andrews
  • 90
  • 5

1 Answers1

2

You could always use a CSS table layout- with each link being a cell with 50% width:

Demo Fiddle

.pagination {
    background: #ccc;
    display: table;
    font-size: 20px;
}
.pagination a {
    display: table-cell;
    width:50%;
    padding: 0.5em;
}
.pagination .prev {
    background: #ddd;
}
.pagination .next {
    background: #ccc;
}

Note that this is different to using HTML tables, which should be (semantically) used for data content- a CSS table can be used to mimic a tabulated layout.

SW4
  • 69,876
  • 20
  • 132
  • 137
  • That does seem to do what I need. I'm a bit hesitant to use tables to lay out non-tabular data. (Yes, I know it's not a table in the markup, but it still seems like a hack.) If this is the only way to do this, how is browser support for this method? – Peter Andrews Aug 14 '14 at 14:50
  • @PeterAndrews - its important to note that CSS `display:table` !== HTML ``. CSS is to produce a presentational layout, HTML denotes content. The presentation of a HTML table results from a browsers default CSS, the HTML `table` is a semantic notation for tabulated data. The two should not be confused.
     – SW4 Aug 14 '14 at 14:53
  • I did say "I know it's not a table in the markup, but it still seems like a hack." My objection is that it's a hack, not that I think it's an HTML table. I am well aware of the difference. – Peter Andrews Aug 14 '14 at 14:56
  • @PeterAndrews - sure, absolutely - apologies, I was trying to clarify the fact it is *not a hack*, I'm sure you are well aware of the difference. – SW4 Aug 14 '14 at 14:57
  • I see. Looks like this is the way to go, I've accepted this answer. Thanks for your help! – Peter Andrews Aug 14 '14 at 15:01