div on side?

[Steve Kostecke]

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

 

[David E. Ross]

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

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

 

[Stan McCann]

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 |

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

 

[Jim Moe]

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

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

 

[knoxautoguy]

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.