ive got one 4 links. i want them all in the same row. two of them in the center, and the other two in the right. ive wrapped them two and two, but i cant get it to work.
my css looks like this:
#links_center {
}
#links_right {
float: right;
}
but it doesnt work. the right links are under the first two links. could someone help me here.
Here's one way to do it, with the assumption that your links are in a fixed width container. Keep in mind that this isn't the only way, just a quick solution that may work for you:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Links Test</title>
<style type="text/css">
#links_center {
float: left;
width: 600px;
}
#links_right {
}
</style>
</head>
<body>
<div style="width: 800px">
<div id="links_center">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
<div id="links_right">
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</div>
</body>
</html>
float:right only works if the #links_right set comes before the #links_center set in the source code. Either rearrange the source code or use float:left on the center set and use padding/margins to place where you want.
It might help to CSS a determined width because it sounds like there might not be enough over all width for them to line horizontally. Also try to float left instead. Another option is making a table.
You could try to use a third , make them all 30-33%, and center the content of (and right-align the content of ).