Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Want to "center" the page in the browser but let the text flow?

0 views
Skip to first unread message

Tom Miller

unread,
Nov 17, 2009, 4:00:25 PM11/17/09
to
Folks,
I would like to have the page show up in the middle of the browser window.
I would like the background to "border around the displayed page." I would
like the page proper to stand out by being another color. For instance, the
basic background of the "border" might be white but the page in the center
might be a pure black background.

Here is the URL I am trying to convert into CSS. http://www.ChatNFiles.com
Here is a URL that has something like what I am shooting for:
http://JewlerybyJulie.ChatNFiles.com But it is tables-based.

Is this even possible?

Tom
--
Who me? What signature?

I manage design and acquistion of data-driven websites at:
http://BlueCollar.ChatNFiles.com
Linkedin Profile: http://www.linkedin.com/in/tlgalenson
www.ChatNFiles.com has telnet chatting and more than 500,000 downloads


Cheryl D Wise

unread,
Nov 17, 2009, 4:22:46 PM11/17/09
to
To center content in the middle of a page requires three things:

1. A valid doctype
2. A container with a defined width (div preferred by can be a table
specified in pixels, percents or ems)
3. Applied CSS selector with margin-left: auto; margin-right: auto.

Example:

#container {
width: 780px;
margin: 0 auto;
}

<div id="container">
<!-- whatever content you want on the page -->
</div>

BTW, please don't cross post to newsgroups that are on different servers.
Not being subscribed to whatever css newsgroup you had in your cross posting
made it difficult to respond.

--
Cheryl D Wise
http://by-expression.com

"Tom Miller" <tlgal...@sbcglobal.net> wrote in message
news:J9EMm.37708$Wf2....@newsfe23.iad...

Tom Miller

unread,
Nov 17, 2009, 5:09:28 PM11/17/09
to
> To center content in the middle of a page requires three things:
>
> 1. A valid doctype
> 2. A container with a defined width (div preferred by can be a table
> specified in pixels, percents or ems)
> 3. Applied CSS selector with margin-left: auto; margin-right: auto.
>
> Example:
>
> #container {
> width: 780px;
> margin: 0 auto;
> }
>
> <div id="container">
> <!-- whatever content you want on the page -->
> </div>

Thank you.


Tom Miller

unread,
Nov 17, 2009, 5:12:14 PM11/17/09
to

"> BTW, please don't cross post to newsgroups that are on different servers.
> Not being subscribed to whatever css newsgroup you had in your cross
> posting made it difficult to respond.
>
>
But, but, but..... They both are on my news server... but it hadn't
occurred to me that if I were trying to read this from say the microsoft
news server it would come back and byte me.
Sorry.

Tom Miller

unread,
Nov 17, 2009, 5:16:28 PM11/17/09
to

> To center content in the middle of a page requires three things:
>
> 1. A valid doctype
> 2. A container with a defined width (div preferred by can be a table
> specified in pixels, percents or ems)
> 3. Applied CSS selector with margin-left: auto; margin-right: auto.
>
> Example:
>
> #container {
> width: 780px;
> margin: 0 auto;
> }
>
> <div id="container">
> <!-- whatever content you want on the page -->
> </div>

Sorry, my mind is slower than light (make that mud) this afternoon.
That takes care of the positioning. My follow on question is how do I get
the background of the "container" to display "over the top" of the
background color command for the <body>?

Its making my head scratch.

Thanks,
Tom


Tom Miller

unread,
Nov 17, 2009, 6:19:15 PM11/17/09
to
> Sorry, my mind is slower than light (make that mud) this afternoon.
> That takes care of the positioning. My follow on question is how do I get
> the background of the "container" to display "over the top" of the
> background color command for the <body>?
>
> Its making my head scratch.
>
That appears to work in the following. Setup the background color in the
<body> for say white.
Like this:

body {
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 11px;
background-color: white;
color: #EAF5FF;

Then use the

"#wholepage {


width: 780px;
margin: 0 auto;

background-color: black;
}

trick. It sets up your page in the middle of the browser window with a
white border around the page! Just what I was shooting for.

So now I have everything but the question of letting the text flow and
"boxes" get narrower and upto the limit wider addressed. If I get stumped
here it STILL looks VERY nice!
Thank you Cheryl!

Cheryl D Wise

unread,
Nov 18, 2009, 11:09:26 AM11/18/09
to
As you discovered adding a background to the container divs does what you
want. Think of it as layering, parts that aren't covered show.

Most of this is covered in the free self paced material at
http://w3schools.com in then css material especially when you combine it
with the html material. I also cover some of A in the Basic website Tutorial
and other tutorials in the site shown in my signature.

--
Cheryl D Wise
http://by-expression.com

"Tom Miller" <tlgal...@sbcglobal.net> wrote in message

news:0hFMm.26783$ZF3....@newsfe13.iad...

Gregory A. Beamer

unread,
Nov 18, 2009, 11:39:39 AM11/18/09
to
"Tom Miller" <tlgal...@sbcglobal.net> wrote in news:2dFMm.6019$cX4.5115
@newsfe10.iad:

> But, but, but..... They both are on my news server... but it hadn't
> occurred to me that if I were trying to read this from say the microsoft
> news server it would come back and byte me.

Most provider news servers are aggregates. Anything that is not microsoft.
will not appear here. It is not a huge issue, to me at least, but
newsreaders throw errors when you try to cross post back and don't have
access. ;-)

Peace and Grace,
Greg

--
Vote for Miranda's Christmas Story
http://tinyurl.com/mirandabelieve

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************

Tom Miller

unread,
Nov 19, 2009, 8:17:40 AM11/19/09
to
> As you discovered adding a background to the container divs does what you
> want. Think of it as layering, parts that aren't covered show.
>
> Most of this is covered in the free self paced material at
> http://w3schools.com in then css material especially when you combine it
> with the html material. I also cover some of A in the Basic website
> Tutorial and other tutorials in the site shown in my signature.

I have been working through the CSS at w3schools but apparently I'm going to
have to go back to the html tutorial too.

A devolopers learning curve is never done <sigh>.

0 new messages