Extend pagination to full width? - html

Question

How would one extend this pagination to be full width? I'm struggling.
Example code: http://cssdeck.com/labs/cxdkfkjv
Thanks
This is the CSS code:
.pagination {
text-align: justify;
background: #f2f2f2;
padding: 20px;
margin-bottom: 20px;
}
.page {
display: inline-block;
padding: 0px 9px;
margin-right: 3px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}
.page:hover, .page.gradient:hover {
background: #fefefe;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}
.page.active {
border: none;
background: #616161;
box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}
.page.gradient {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9);
}
The HTML part comes in here
<div class="pagination">
<p>How can I extend (justify) this pagination to the full width of the div "pagination"?</p>
first<a href=
"#" class="page gradient">2</a><a href="#" class=
"page gradient">3</a><span class=
"page active">4</span><a href="#" class=
"page gradient">5</a><a href="#" class=
"page gradient">6</a><a href="#" class=
"page gradient">last</a>
</div>

Answer 1

In your given markup, the child elements of pagination have no whitespace between them.
So firstly, make sure there is a whitespace in your markup between the child elements. Without this there's no way text-align:justify will work.
(Just like when you want to justify text, it won't work unless you have spaces between your words!)
Next, add a pseudo element after the pagination element with 100% width.
Updated DEMO
..or for those who prefer a FIDDLE :)
.pagination:after
{
content: '';
width: 100%;
display: inline-block;
}

Answer 2

Are you loocking for this?
Set your .pagination to display: table; and them your .page to table-cell.

Answer 3

Not sure what you want to do, if only center in the middle Anup just answered how to, but if you want to extend evenly all buttons, you can try and use display: table;
http://cssdeck.com/labs/krdfmoeh

Answer 4

I'm not sure if there's an automatic way to do this. What you could do is something like this:
.pagination {
text-align:center;
}
.page {
width:6%;
margin:0 3.9%;
}
Remove the padding from .page or add * { box-sizing:border-box; }.
If you want the first and left buttons to have to margin on the outside, give them "first" and "left" classes and do:
.page {
width:6%;
margin:0 4.5%;
}
.page.first { margin-left:0; }
.page.last { margin-right:0; }
See: http://cssdeck.com/labs/yfuud0le
Note that if you add more pagination items you have to manually edit the width and margin of the .page div.

Answer 5

Center will look nice for you.
.pagination {
text-align: center;
}