CODEWITHSUNDEEP
htmlcss
Peter Andrews
Peter Andrews

Reputation: 90

Make two elements with variable width content the same width

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!

Upvotes: 3

Views: 2450

Answers (1)

SW4
SW4

Reputation: 71140

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.

Upvotes: 2

Related Questions