How do I use CSS to center child elements?

[Joshua Beall]

Take a look at this page:

http://joshuabeall.com/pages/sample.htm

I want to center the left sidebar, centerbar, and right sidebar. How would
I do this?

In the past I pretty much used HTML tables for everything, and I am trying
to learn how to switch over to CSS, so I am sure I must just be missing
something.

-Josh

 

[Chris Leonard]

I want to center the left sidebar, centerbar, and right sidebar. How
would

I do this?

Why not use absolute positioning ?

..mastercontainer
{
BORDER: 2px #e0e0e0 solid;
position: absolute;
top: 100px;
left: 200px;
WIDTH: 100%;
text-align: center;
}

Don't use SPAN, use DIV

I'm no expert, but this works for me, maybe someone else could tell us both
if there is a better way

 

[Joshua Beall]

Why not use absolute positioning ?

Wouldn't that position things absolutely, as the name suggests? Thus, it
would only be centered if the browser is at the right size. Otherwise it
would be offset left or right. Is this correct?

.mastercontainer
{
BORDER: 2px #e0e0e0 solid;
position: absolute;
top: 100px;
left: 200px;
WIDTH: 100%;
text-align: center;
}

Don't use SPAN, use DIV

How come? I used <span> because I thought <div> would put a line break
there, and I thought <span> was the same as <div>, except that it does not
put a line break. Is this wrong?

 

[Richard]

Wouldn't that position things absolutely, as the name suggests? Thus,
it
would only be centered if the browser is at the right size. Otherwise
it
would be offset left or right. Is this correct?

No. The position is for the div itself, not the content. There are other
tricks to be used for the content.

 

[informant]

No. The position is for the div itself, not the content. There are other
tricks to be used for the content.

Could you explain these tricks for the poster, Mr. Bullis?

 

[David Dorward]

Wouldn't that position things absolutely, as the name suggests? Thus, it
would only be centered if the browser is at the right size.

Not if it was positioned within an centred block of the right width.

 

[Richard]

informant wrote:

Could you explain these tricks for the poster, Mr. Bullis?

<bend over>
shove it up your ass
</bend over>

 

[informant]

informant wrote:





<bend over>
shove it up your ass
</bend over>

As I suspected, when pressed for real information, you revert to being
obnoxious.

--
Comments about Bullis:
As unwelcome as you have always been in here....You keep going
'.....offering idiotic comment after idiotic comment.

I'm gonna echo these sentiments. We know Bullis is a sick ****.

This appears to be a field in which you are not qualified to render an
opinion.

....every time I resolve to be more civil on usenet, I see another post from
"richard" giving someone completely off-the-wall advice with dangerous
consequences. So instead of saying something uncivil like "richard, you
clueless, pathetic moron, SHUT THE **** UP!!!" I;ll just bite my tongue and
say nothing.

Please stop posting legal advice, as you are clearly not qualified and most
of your advice is worse than useless.

Once again, following Richard's advice will end up with you being arrested.

of a child, but you're no mindreader and as long as the thoughts remain a
fantasy, there is no possible way to convict".

 

[Joshua Beall]

Not if it was positioned within an centred block of the right width.

But then have I not just pushed the problem back to the parent element?
Because then do I not have to explicitly set the width of the parent element
to something? I would prefer my layout to be fluid.

Sorry, I am new to the CSS way of doing things.

 

[Owen Jacobson]

But then have I not just pushed the problem back to the parent
element? Because then do I not have to explicitly set the width of
the parent element to something? I would prefer my layout to be
fluid.

Sorry, I am new to the CSS way of doing things.

My usual approach to centering blocks inside other blocks:

....
<style type="text/css">
..IE5Hack {
text-align: center; /* quirks-mode IE centers incorrectly using this
instead of margins, below */
}

..someclass {
text-align: left;
margin-left: auto;
margin-right: auto; /* broadly, if opposing margins are both auto
then they will end up being equal */
...more style...
}
</style>
....

<div class="IE5Hack">
<div class="someclass">
<p>My content here</p>
</div>
</div>

Note that using divs for both may not be the Right Thing: if the
content is logically a single paragraph then the inner div is
superfluous and the class could move to the paragraph itself.

Owen