div on side?

Discussion in 'HTML' started by Steve Kostecke, Feb 18, 2006.

  1. 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, Feb 18, 2006
    #1
    1. Advertising

  2. Steve Kostecke wrote:
    > 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.)

    --

    David E. Ross
    <http://www.rossde.com/>
    David E. Ross, Feb 18, 2006
    #2
    1. Advertising

  3. Steve Kostecke

    Stan McCann Guest

    "Steve Kostecke" <> wrote in
    news::

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

    --
    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
    Stan McCann, Feb 18, 2006
    #3
  4. Steve Kostecke

    Jim Moe Guest

    Steve Kostecke wrote:
    >
    > <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>

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Feb 18, 2006
    #4
  5. Steve Kostecke

    knoxautoguy Guest

    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.
    knoxautoguy, Feb 21, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Josef K.

    <label><div></div></label> allowed?

    Josef K., May 20, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    13,399
    Josef K.
    May 22, 2005
  2. Jim in Arizona

    <div id="help" runat="server"></div>

    Jim in Arizona, Nov 17, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    12,532
    Kevin Spencer
    Nov 17, 2005
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    743
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    185
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    307
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page