Centering an element to the right of another

nostalgia75

01-08-2008, 09:24 PM

Greetings, all. I'm trying to make a 'go back' link at the top of my web page. I'd like it to appear to the left of the centered title text on the page but on the same line vertically. For example:

< Go Back WIDGET PAGE

I'm very close, but with the following code "WIDGET PAGE" gets centered between the right of "< Go Back" and the right edge of the page, instead of being centered in the whole page as I'd like.

CSS:

.mainpage ul#headernav
{
list-style-type: none;
padding: 0 0;
border: none thin;
height: 22px;
font-size: 8pt;
text-align: center;
}
.mainpage ul#headernav li
{
display: block;
width: auto;
padding: 2px;
text-align: center;
}

.mainpage ul#headernav .left { float: left; }

HTML:

<ul id="headernav">
<li class='left'><a ref="#"&lt Go Back</a></li>
<li class='center'>WIDGET PAGE</li>
</ul>

I've tried various experiments with the 'center' class with no luck. I've also tried various iterations of moving the WIDGET PAGE HTML out of the <ul>, notably something like:

CSS:

.mainpage #header
{
text-align: center;
}

.mainpage ul#headernav
{
list-style-type: none;
padding: 0 0;
border: none thin;
height: 22px;
font-size: 8pt;
text-align: center;
width: 10%;
float: left;
}

.mainpage ul#headernav li
{
display: block;
width: auto;
padding: 2px;
text-align: center;
border: none thin;
}

.mainpage ul#headernav .left { float: left; }

HTML:

<div id="header">
<ul id="headernav">
<li class='left'><a href="#">&lt Go Back</a></li>
</ul>
<p class='center'>WIDGET PAGE</p>
</div>

Which results in odd behavior where the "Go Back" block is lower than the WIDGET PAGE text and interferes with the table immediately following WIDGET PAGE - the table is aligned to the right edge of the "Go Back" block. Like this:

WIDGET PAGE
< Go Back
|-----------------------------------------------------|
| Awesome ASCII art table |

If I add a "border: solid thin;" to .mainpage #header, the <ul> and <p> blocks align vertically and there is no longer any interference with the table. I didn't realize alignment was dependent on whether or not a block's border was visible.

-------------------------------------------------------
|< Go Back WIDGET PAGE |
-------------------------------------------------------
|-----------------------------------------------------|
| Awesome ASCII art table |

Thanks for any advice. I'm just learning CSS and having fun, but this is making me a little batty.

-Joe

Excavator

01-08-2008, 10:01 PM

hello nostalgia75,
copy/paste this into a new .html and look at it in your browser. I commented on the CSS to show what it's doing:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
html, body {
background: #CCCCCC;
text-align: center; /*centers text*/
font: normal 100% Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
* { /*removes default margin/padding*/
margin: 0;
padding: 0;
border: none;
}
#container {
width: 760px;
margin: 0 auto; /*centers #container*/
}
#headernav {
background: #33CCFF;
}
#left {
float: left; /*allows other things on the same line with it*/
margin: 10px 0 0 20px; /*positions the float*/
}
</style>
</head>
<body>
<div id="container">
<div id="headernav">
<a href="#" id="left">Go Back</a>
<h1>WIDGET PAGE</h1>
</div>
</div>
</body>
</html>

nostalgia75

01-08-2008, 10:06 PM

Excavator,

Thanks for that, especially the comments.

It exhibits the same behavior as my first CSS/HTML code in my post - the 'Go Back' is on the left like we expect, and 'WIDGET PAGE' is center in the remaining space between 'Go Back' and the right edge of the page. What I'm trying to do is get 'WIDGET PAGE' centered on the whole page as if the 'Go Back' weren't there.

Thanks very much,

-Joe

Excavator

01-08-2008, 10:46 PM

I see.

If "Widget Page" is going to be the same phrase all the time, even floating the h1 and margining it over to center would not stop it from moving on a text resize.
Try nesting a second div for the link (link has to be on top since users will need to click on it) and margining it up to line up with the title. This holds together pretty well even with a text resize or two:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
html, body {
background: #CCCCCC;
font: normal 100% Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 760px;
height: 400px;
margin: 0 auto;
background: #99FF99;
}
#headernav {
text-align: center;
background: #33CCFF;
margin: 10px 0;
}
#nav {
width: 760px;
float: left;
margin: -40px 0 0 0;
}
#left {
float: left;
margin: 10px 0 0 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="headernav">
<h1>WIDGET PAGE</h1>
<div id="nav">
<a href="#" id="left">Go Back</a>
</div>
</div>
</div>
</body>
</html>

nostalgia75

01-08-2008, 10:59 PM

This looks like it fixes the problem, thanks! One question: I thought negative margins were a no-no?

-Joe

Excavator

01-08-2008, 11:11 PM

This looks like it fixes the problem, thanks! One question: I thought negative margins were a no-no?

-Joe

Well, probably as big a no-no as absolute positioning I would say. I avoid both but they each have their use.