How to get centered div with 1px border?

I'm trying to get a 1px border around the content section of this page:

http://www.clearpointsystems.com

As you will see, I have a header/nav bar (looks correct), but the border around
the content is not centered and does not resize properly as the browser window
is resized.

The goal is a 1px border around the content (div id="page") with about 30px (or
2%) margin all around and the border/content should resize as the browser
window is resized.

What I have now is something of a hack:

#page {
position:absolute;
top:80px;
width:80%;
height:50%;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #333333;
text-align:left;
margin-top:0 auto 0 auto;
padding:30px 30px 30px 30px;
}

How do I get a centered div with an evenly-spaced 1px border all around?

Thanks in advance.

Once upon a time *deko* wrote:

I'm trying to get a 1px border around the content section of this page:

http://www.clearpointsystems.com

As you will see, I have a header/nav bar (looks correct), but the border around
the content is not centered and does not resize properly as the browser window
is resized.

The goal is a 1px border around the content (div id="page") with about 30px (or
2%) margin all around and the border/content should resize as the browser
window is resized.

What I have now is something of a hack:

#page {
position:absolute;
top:80px;
width:80%;
height:50%;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #333333;
text-align:left;
margin-top:0 auto 0 auto;
padding:30px 30px 30px 30px;
}

How do I get a centered div with an evenly-spaced 1px border all around?

Thanks in advance.

#page {
width:80%;
height:50%;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #333333;
text-align:left;
margin:0 auto;
padding:30px;
}

You can't use "position:absolute;" so you don't need the "top:80px;"
Set the margin-top to something more than "0" if you like, but that is
only for the top margin and nothing else. Bottom, left and right margin
is a different matter. "margin:0 auto;" set the top and bottom margins
to 0 and "auto" is centering the div horizontaly, if that is your goal?

--
/Arne

Proud User of SeaMonkey. Get your free copy:
http://www.mozilla.org/projects/seamonkey/

deko wrote:

I'm trying to get a 1px border around the content section of this page:

http://www.clearpointsystems.com

How do I get a centered div with an evenly-spaced 1px border all around?

Replace all of your stylesheet with this (don't use abs pos):

body {margin:0;font-size:small;}
#header {width:100%;margin:0;padding:10px 0 9px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;font-weight:bold;text-transform:uppercase;
letter-spacing:.2em;background:#E8E7DD;text-align:center;}
#navtable a:link { color:#FFFFFF; text-decoration:none; }
#navtable a:visited { color:#FFFFFF; text-decoration:none; }
#navtable a:hover { color:#003300; text-decoration:none; }
#navtable td {background-color:#00CC33; /* green */
text-align:center;font-size:12px
font-family:Verdana, Arial, Helvetica, sans-serif;}
#sidebar {background:#E8E7DD;font-family:Verdana, Arial, Helvetica,
sans-serif;
float:right;width:190px;margin:0;padding:15px;}
#page {width:80%;font-family:Arial, Helvetica, sans-serif;
border: 1px solid #333333;text-align:left;
margin:0 auto;padding:30px;}

--
Gus

http://www.clearpointsystems.com

How do I get a centered div with an evenly-spaced 1px border all around?

Replace all of your stylesheet with this (don't use abs pos):

That looks great!

This was my first attempt at using a table navbar. I like the idea because
there are no images - keeps page size down. But I thought I needed to use
absolute positioning to get that header right.

What's wrong with absolute positioning? I've had pretty consistent results in
FF and IE.

Thanks for the help!

PS. You can see the changes online - I am working on that sidebar at the
moment...

deko wrote:

http://www.clearpointsystems.com

How do I get a centered div with an evenly-spaced 1px border all
around?

PS. You can see the changes online - I am working on that sidebar at
the moment...

May I invite you to see this page, about fonts and sizing?
http://k75s.home.att.net/fontsize.html

--
-bts
-Warning: I brake for lawn deer

May I invite you to see this page, about fonts and sizing?
http://k75s.home.att.net/fontsize.html

Thanks for the tip. I'm using 'font-size:small' (and medium, large) which seems
to get me by in most cases. As for Veranda, I have no special attachment to it,
though it is readable. Trebuchet MS might be alternative. What do you suggest?

Deciding to do something for the good of humanity, deko
<deko (AT) nospam (DOT) com> declared in
comp.infosystems.www.authoring.stylesheets:

As for Veranda, I have no special attachment to it,
though it is readable. Trebuchet MS might be alternative.
What do you suggest?

sans-serif

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

sans-serif

yeah... better than Times New Roman

deko wrote:

This was my first attempt at using a table navbar. I like the idea
because there are no images - keeps page size down.

Funny thing is that I see 5 calls for _s1.gif_ in your table.

But I thought I
needed to use absolute positioning to get that header right.

Live and learn. ;-)

What's wrong with absolute positioning?

Nothing actually, but don't use it if you don't have to and you don't
have to in most instances.
You have to understand that an absolutely positioned element is out of
the normal flow.

I've had pretty consistent
results in FF and IE.

There is more than one way to skin a cat.

PS. You can see the changes online - I am working on that sidebar at
the moment...

Looking fine here.

--
Gus

deko wrote:

May I invite you to see this page, about fonts and sizing?
http://k75s.home.att.net/fontsize.html

Thanks for the tip. I'm using 'font-size:small' (and medium, large)
which seems to get me by in most cases.

Using the sizing words could present a problem in some browsers. I'd
recommend going with just percentages for sizing. The following should
do it.

body { font-size: 100%; } /* everyone's default size */
h1 { font-size: 140%; } /* <-- or similar for headings */
h2 { font-size: 125%; }
h3 { font-size: 115%; }
..legalese { font-size: 85%; }

If 100% looks too large to you, reset your own browsers' default sizes.

Use em units for the sizing of <div>s (so they expand with the text when
the visitor resizes) and only use pixels (px) for explicit borders if
necessary. There should be no need for px for anything else, in most web
pages.

As for Veranda, I have no special attachment to it, though it is
readable. Trebuchet MS might be alternative. What do you suggest?

I have a couple of sites where I use:
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
and that seems to work well.

--
-bts
-Warning: I brake for lawn deer