Hi,

 

Anyone any idea how to fix this? (see attached image)

 

The css for this is:

 

.page_nav .alignleft {float:left; width:100%;}
.page_nav .alignright {text-align:right; width:100%;}
.page_nav .aligncenter {text-align:center; width:100%;}

 

Any idea?

Hi Xander, the problem is that you've given each element a width of 100% which means that there is no room left for the other elements.

 

You could try the following to achieve what you're after…

 

CSS

.page_nav { overflow: hidden; text-align: center; width:100%; }
.page_nav .alignleft { float:left; }
.page_nav .alignright { float: right; }

 

HTML

<p class="page_nav">
<span class="alignleft">Older Entries</span>
1 2 4 5 6 7
<span class="alignright">Newer Entries</span>
</p>

Hi,

 

Anyone any idea how to fix this? (see attached image)

 

The css for this is:

 

.page_nav .alignleft {float:left; width:100%;}
.page_nav .alignright {text-align:right; width:100%;}
.page_nav .aligncenter {text-align:center; width:100%;}

 

Any idea?

 

Not sure if this is the best way

 

.page_nav .alignleft {float:left; margin-top:0; width:100%;}
.page_nav .alignright {text-align:right; margin-top:-10px; width:100%;}
.page_nav .aligncenter {text-align:center; margin-top:-10px;  width:100%;}

 

may have to play around with the negative values though.

 

Pat

Hi Rob,

 

Thanks for that.

Getting there, this happens now (see attached image)

 

It still drops on the "Newer Entries" and stretches the box...

Could you give me the link to the page

Could you give me the link to the page

 

I'd love to, but it's on a local machine unfortunately

Ok, then the best bet would be going to Pastie and pasting your CSS and HTML then coming back here with the links.

 

I can't give you a definitely answer to your problem without seeing all the code.

The code is exactly as you put up there ^^

I see the problem. I don't have time right now to come up with the new code, but you could try using floated columns to achieve what you want.

 

Hopefully someone else will be able to fill you in

Try using Rob's code but put a width on the floated spans of 32.9%

i don't know if this works but what if you just use the text-align property ?

 

<p>
<span class="left"> Older entries</span>
<span class="center">1 2 3 4 5 </span>
<span class="right"> Newer entries</span>
</p>

 

 

.left { text-align: left;}
.center { text-align: center; }
.right{ text-align: right; }

 

And I'm guessing Rob's watching football