Question

I want to use CSS to build a navigational layout, for a series of blog posts, each of which is a chapter of a cartoon series:

<div with 500px width>-------------------------
-----------------------------------------------
-----------------------------------------------
<div>
<<previous          +more                >>next
</div>
</div>

The ‘previous’, ‘next’ and ‘more’ are all empty divs (but could be spans) with 50px width and background-image applied. They link to the relevant places.

I’m using CSS sprites to create nice hover effects, which also means I can’t easily alter the width of each link without messing up the sprites.

For the life of me, I can’t figure out how to style the three divs to get ‘previous’ to float extreme left, ‘more’ to float centre, and ‘next’ to float right.

Can anyone help?

Thanks.

---

Answer 1

Can you just define the margin since I assume the container div will always be 500?

So something like

<div style="width: 500px">
<div style="float: left;">Previous</div>
<div style="float: left; margin-left: how ever many pixels it takes to center;">more</div>
<div style="float: right;">Next</div>
</div>