css 3 coloum layout?

[crashb648]

Hello everyone!

I am still getting to grips with css. I have done a how page using css, but come across a problem when i have tried to do a three coloum layout at the bottom of the page:

As you can see, the left (named toplink) and middle coloums (the top one is called storyhead and the one below it is called storynav) are fine, but the right one (top link) wont go to the right. Can anyone please help?

Here's the html code:

<div id="backlink">
<a href="javascript:history.go(-1)"><img border="0" src="images/backicon.png" alt="back" width="80" height="50" /></a>
</div>

<div id="storyhead">
Charlotte's Story Navigation
</div>

<div id="storynav">
<a href="story.php"><em>Page 1</em></a> | <a href="story2.php"><em>Page 2</em></a> | <a href="story3.php"><em>Page 3</em></a> | <a href="story4.php"><em>Page 4</em></a> | <a href="story5.php"><em>Page 5</em></a>
</div>

<div id="toplink">
<a href="#top"><img border="0" src="images/topicon.png" alt="top" width="80" height="50" /></a>
</div>


Heres the css:

div#backlink
{float: left; width: 100px; height: 50px; padding: 0px; margin: 0px;
background-color:#000000; border-top: thin solid #000000; color:#FFFFFF;}

div#storyhead
{float: right; width: 740px; height: 25px; padding: 0px; margin-left: 100px;
text-align: center; font-family: verdana; font-weight: bold; font-size: 10pt;
border-top: thin solid #000000; color:#778899;
background-color:#000000; }

div#storynav
{float: right ; width: 740px; height: 25px; padding: 0px; margin-left: 100px;
text-align: center; font-family: verdana; font-weight: bold; font-size: 10pt; color:#778899;
border-top: thin solid #000000;
background-color:#000000; }

div#toplink
{float: right; width: 100px; height: 50px; padding: 0x;
background-color:#000000; border-top: thin solid #000000; color:#FFFFFF; }

[crashb648]

Here's the screenshot of the problem, i forgot to post it in the previous post! haha



Can anyone help me?


Click to view...

[ianm]

Have juggled a few things around in the html mostly dont think its still quite right but it should be closer, you might need to add a little bit of padding to a few things but I was not quite to sure how it is meant to look, anyway have a play with the following see if its works any better, i was tempted to redo the whole thing but I guess that would have taken away the fun of learning.

html



<div id="storyhead">
<a href="javascript:history.go(-1)"><img border="0" src="images/backicon.png" alt="back" width="80" align="left" height="50" /></a>
Charlotte's Story Navigation
<a href="#top"><img src="images/topicon.png" alt="top" width="80" height:"50px" border="0" align="right" /></a></div>

<div id="storynav">
<a href="story.php"><em>Page 1</em></a> | <a href="story2.php"><em>Page 2</em></a> | <a href="story3.php"><em>Page 3</em></a> | <a href="story4.php"><em>Page 4</em></a> | <a href="story5.php"><em>Page 5</em></a>





</div>
</div> <!-- end of story nav div -->



css


div#storyhead
{width: 100%; height: 25px; margin: 0 auto;
text-align: center; font-family: verdana; font-weight: bold; font-size: 10pt;
border-top: thin solid #000000; color:#778899;
background-color:#000000; }

div#storynav
{width: 100%; height: 25px; padding: 0px; margin: 0 auto;
text-align: center; font-family: verdana; font-weight: bold; font-size: 10pt; color:#778899;
border-top: thin solid #000000;
background-color:#000000; }