I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and link is as follows:
<div id="content">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="kwicks.js"></script>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<ul class="kwicks">
<li id="kwick1"><a href="index.php">Home</a></li>
<li id="kwick2"><a href="klanten.php">Klanten</a></li>
<li id="kwick3"><a href="nieuwsbrieven.php">Nieuwsbrieven</a></li>
<li id="kwick4"><a href="subscriptions.php?page=1">Subscriptions</a></li>
</ul>
<A href='logout.php'>Logout</A>
</div>
The current display looks like this:
My desired layout is shown below:
I attempted to enclose the link in a div tag and align it as follows:
<div class="right">
<A href='logout.php'>Logout</A>
</div>
The corresponding CSS style:
.right {
text-align: right;
float: right;
}
However, this only places the link at the bottom right corner of the menu. This might be a simple task for many of you, but I'm unable to get it right. Any guidance on how to achieve the desired layout would be greatly appreciated!