Hello. I'm wondering, say I have a centered bit of content (and center
of screen, so probably 100% width for that div), like so

<div align="center" style="width: 100%">
Some content that's centered
</div>

How exactly does one add something aligned to the right but in the same
"row" or "line" if you will (the right align content is not under the
centered, but to the right of it, with the centered content still being
in center, and not pushed over or anything.

So it would come out something like this:

| Centered Content Right Aligned |


(And the right aligned needs to stay to always hug the right side, so
when the screen is resized its still the same amount of space from the
right, and the centered is still center of the screen.)

I know I might not be doing it all right so far, so any pointers an help
would be greatly appreciated.

(Also, what if I wanted to also throw in a left side section, that acts
like the right side, but for the left instead, would that require
anything special compared to how ever its done for the right side
section?)

Steve Kostecke wrote:[color=blue]
> Hello. I'm wondering, say I have a centered bit of content (and center
> of screen, so probably 100% width for that div), like so
>
> <div align="center" style="width: 100%">
> Some content that's centered
> </div>
>
> How exactly does one add something aligned to the right but in the same
> "row" or "line" if you will (the right align content is not under the
> centered, but to the right of it, with the centered content still being
> in center, and not pushed over or anything.
>
> So it would come out something like this:
>
> | Centered Content Right Aligned |
>
>
> (And the right aligned needs to stay to always hug the right side, so
> when the screen is resized its still the same amount of space from the
> right, and the centered is still center of the screen.)
>
> I know I might not be doing it all right so far, so any pointers an help
> would be greatly appreciated.
>
> (Also, what if I wanted to also throw in a left side section, that acts
> like the right side, but for the left instead, would that require
> anything special compared to how ever its done for the right side
> section?)
>
>[/color]

Do you mean you want to create a right sidebar as in my home page? (See
the URL in my signature below.)

--

David E. Ross
<http://www.rossde.com/>

David E. Ross wrote:[color=blue]
> Steve Kostecke wrote:[color=green]
>> Hello. I'm wondering, say I have a centered bit of content (and
>> center of screen, so probably 100% width for that div), like so
>>
>> <div align="center" style="width: 100%">
>> Some content that's centered
>> </div>
>>
>> How exactly does one add something aligned to the right but in the
>> same "row" or "line" if you will (the right align content is not
>> under the centered, but to the right of it, with the centered content
>> still being in center, and not pushed over or anything.
>>
>> So it would come out something like this:
>>[color=darkred]
>>> Centered Content Right Aligned |[/color]
>>
>>
>> (And the right aligned needs to stay to always hug the right side, so
>> when the screen is resized its still the same amount of space from
>> the right, and the centered is still center of the screen.)
>>
>> I know I might not be doing it all right so far, so any pointers an
>> help would be greatly appreciated.
>>
>> (Also, what if I wanted to also throw in a left side section, that
>> acts like the right side, but for the left instead, would that
>> require anything special compared to how ever its done for the right
>> side section?)
>>
>>[/color]
>
> Do you mean you want to create a right sidebar as in my home page?
> (See the URL in my signature below.)[/color]

Sorta, but just at the top, like a banner... I don't want to use table
100% width tables, that just leads to other problems, and IIRC divs are
a better way overal, no?

Steve Kostecke wrote:[color=blue]
>
> <div align="center" style="width: 100%">
> Some content that's centered
> </div>
>
> How exactly does one add something aligned to the right but in the same
> "row" or "line" if you will (the right align content is not under the
> centered, but to the right of it, with the centered content still being
> in center, and not pushed over or anything.
>
> So it would come out something like this:
>
> | Centered Content Right Aligned |
>[/color]
<div align="center" style="width: 100%">
<span style="float:right">Right Aligned</span>
Some content that's centered
</div>

or

<div align="center" style="width: 100%">
<span style="position: absolute; right: 2em;">Right Aligned</span>
Some content that's centered
</div>

or

<div align="center" style="width: 100%">
<div style="position: absolute; right: 2em; width: 10em">Right Aligned</div>
Some content that's centered
</div>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

"Steve Kostecke" <spamtrap@ntp.isc.org> wrote in
news:45p43vF7rucfU1@individual.net:
[color=blue]
> Hello. I'm wondering, say I have a centered bit of content (and
> center of screen, so probably 100% width for that div), like so
>
> <div align="center" style="width: 100%">
> Some content that's centered
> </div>
>
> How exactly does one add something aligned to the right but in the
> same "row" or "line" if you will (the right align content is not
> under the centered, but to the right of it, with the centered
> content still being in center, and not pushed over or anything.
>
> So it would come out something like this:
>
>| Centered Content Right Aligned |[/color]

See http://www.w3.org/TR/CSS21/visuren.html#propdef-float. Enclose
your right side content in an appropriate element and style that
element to float to the right. It will then hug the right margin.
Apply left instead of right for left side.

http://alamo.nmsu.edu/catalog/ shows an old example (scroll down). I
hadn't visited that page in quite some time. Looks like it needs some
work again (I'll do it in the site revision I'm in the process of).

--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Webmaster, NMSU at Alamogordo http://alamo.nmsu.edu/
Now blocking Google Grouper posts and replies.
http://blinkynet.net/comp/uip5.html

Steve Kostecke wrote:[color=blue]
> David E. Ross wrote:[color=green]
>> Steve Kostecke wrote:[color=darkred]
>>> Hello. I'm wondering, say I have a centered bit of content (and
>>> center of screen, so probably 100% width for that div), like so
>>>
>>> <div align="center" style="width: 100%">
>>> Some content that's centered
>>> </div>
>>>
>>> How exactly does one add something aligned to the right but in the
>>> same "row" or "line" if you will (the right align content is not
>>> under the centered, but to the right of it, with the centered content
>>> still being in center, and not pushed over or anything.
>>>
>>> So it would come out something like this:
>>>
>>>> Centered Content Right Aligned |
>>>
>>> (And the right aligned needs to stay to always hug the right side, so
>>> when the screen is resized its still the same amount of space from
>>> the right, and the centered is still center of the screen.)
>>>
>>> I know I might not be doing it all right so far, so any pointers an
>>> help would be greatly appreciated.
>>>
>>> (Also, what if I wanted to also throw in a left side section, that
>>> acts like the right side, but for the left instead, would that
>>> require anything special compared to how ever its done for the right
>>> side section?)
>>>
>>>[/color]
>> Do you mean you want to create a right sidebar as in my home page?
>> (See the URL in my signature below.)[/color]
>
> Sorta, but just at the top, like a banner... I don't want to use table
> 100% width tables, that just leads to other problems, and IIRC divs are
> a better way overal, no?[/color]

Where you position the sidebar (including the top) is your choice. My
page does not use tables for this (the white box "Statistics"). I do
use tables when I want three or more content areas on the same line,
which I do consider to be tabular presentations.

See my <http://www.rossde.com/test/two_sidebars.html> for an example
without any tables at all, with both left and right sidebars and a
central content area that extends beyond them to fill the entire width.

Creating three content areas with even the center area constrained to
the same horizontal area can be done entirely with style-sheets, but
that can be complicated.

--

David E. Ross
<http://www.rossde.com/>

Concerned about someone (e.g., Pres. Bush) snooping
into your E-mail? Use PGP.
See my <http://www.rossde.com/PGP/>

I have done a similar thing with CSS. The same principle should hold
in HTML. Just align your text left -n% or right-n% to get it to one
side or the other of the centered content. For example, I have "top of
page" at various places linked to an anchor at, surprisingly enough,
the top of the page. You may have to use display and absolute
positioning. I have enclosed it in a <span> and then coded the css
file like this:
span.topofpage {
display: block;
position: absolute;
right: -20%;
}
This places my "top of page" links off to the right of the centered
content, which is also positioned absolutely by using similar code.
Whether this is the RIGHT way or not, I don't know; but it works for me.