Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How do I use CSS to center child elements?

Reply
Thread Tools

How do I use CSS to center child elements?

 
 
Joshua Beall
Guest
Posts: n/a
 
      10-30-2003
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


 
Reply With Quote
 
 
 
 
Chris Leonard
Guest
Posts: n/a
 
      10-31-2003
> 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


 
Reply With Quote
 
 
 
 
Joshua Beall
Guest
Posts: n/a
 
      10-31-2003
"Chris Leonard" <(E-Mail Removed)> wrote in message
news:bns9un$ord$(E-Mail Removed)...
> 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?


 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      10-31-2003
Joshua Beall wrote:

> "Chris Leonard" <(E-Mail Removed)> wrote in message
> news:bns9un$ord$(E-Mail Removed)...
>> 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?


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


 
Reply With Quote
 
informant
Guest
Posts: n/a
 
      10-31-2003

"Richard" <anom@anom> wrote in message news:(E-Mail Removed)...
> Joshua Beall wrote:
>
> > "Chris Leonard" <(E-Mail Removed)> wrote in message
> > news:bns9un$ord$(E-Mail Removed)...
> >> 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?

>
> 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?


 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      10-31-2003
Joshua Beall wrote:

> 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.

--
David Dorward http://dorward.me.uk/
 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      10-31-2003
informant wrote:


> "Richard" <anom@anom> wrote in message
> news:(E-Mail Removed)...
>> Joshua Beall wrote:


>> > "Chris Leonard" <(E-Mail Removed)> wrote in message
>> > news:bns9un$ord$(E-Mail Removed)...
>> >> 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?


>> 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?



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


 
Reply With Quote
 
informant
Guest
Posts: n/a
 
      10-31-2003

"Richard" <anom@anom> wrote in message
news:(E-Mail Removed)...
> informant wrote:
>
>
> > "Richard" <anom@anom> wrote in message
> > news:(E-Mail Removed)...
> >> Joshua Beall wrote:

>
> >> > "Chris Leonard" <(E-Mail Removed)> wrote in message
> >> > news:bns9un$ord$(E-Mail Removed)...
> >> >> 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?

>
> >> 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?

>
>
> <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.

"Richard" <(E-Mail Removed)> wrote: "I may have fantasies involving rape
of a child, but you're no mindreader and as long as the thoughts remain a
fantasy, there is no possible way to convict".



 
Reply With Quote
 
Joshua Beall
Guest
Posts: n/a
 
      10-31-2003
"David Dorward" <(E-Mail Removed)> wrote in message
news:bnt3fn$k1v$1$(E-Mail Removed)...
> Joshua Beall wrote:
>
> > 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.


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.


 
Reply With Quote
 
Owen Jacobson
Guest
Posts: n/a
 
      11-01-2003
Joshua Beall wrote:

> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to center child controls in a datagrid header? =?Utf-8?B?c2xlbWVu?= ASP .Net 0 06-21-2006 09:17 PM
Naming of core NASA center with the words "Mission Control Center" & mass use of religious anthem sounding word "Mission" in Context of Space Exploration & the Moon Landing Hoax moonlandinghoaxreligious@yahoo.com Digital Photography 0 09-27-2005 08:28 PM
EJB: How to delete child entries from a parent-child CMR one-to-many relationship? davout Java 0 04-18-2004 07:02 PM
[HELP] Why the child window reopen a new child window ? bhchng ASP .Net 0 01-13-2004 07:17 AM
How do I: Main thread spawn child threads, which child processes...control those child processes? Jeff Rodriguez C Programming 23 12-09-2003 11:06 PM



Advertisments