floating box in CSS

Discussion in 'HTML' started by Robert, Dec 1, 2004.

  1. Robert

    Robert Guest

    I am trying to create a floating box right aligned in CSS. Text should
    flow around the box (or to the left). The inspiration for the
    technique came from http://www.quirksmode.org/. Check the link out for
    an example of my objective.

    My CSS code is not as elegant though. It creates the border and the
    background color, but does not right align the floating box with text
    wrapping around. The text size appears the same as the <p> tag; not
    90% smaller. The float and clear CSS tag have me a bit confused as
    well. Please let me know if you lead me in the right direction. My CSS
    follows.

    <div class="floater">
    <p>.*</p>
    </div>

    div.floater {
    width: 35%;
    margin: 8px 8px;
    margin-left: 8px;
    padding: 10px;
    border: 1px solid #6699FF;
    background-color: #BBD2FF;
    font-size: 90%;
    clear: right;
    }


    I would like to create columns (sort of like tables) in CSS. For
    example, have a floating box with two columns and position it wherever
    on the page (Right, Left, and Center). I am trying advance my CSS
    knowledge & have the basics down; so please avoid retorts like use
    tables.
     
    Robert, Dec 1, 2004
    #1
    1. Advertising

  2. Robert

    Els Guest

    Robert wrote:

    > I am trying to create a floating box right aligned in CSS.
    > Text should flow around the box (or to the left). The
    > inspiration for the technique came from
    > http://www.quirksmode.org/. Check the link out for an
    > example of my objective.
    >
    > My CSS code is not as elegant though. It creates the border
    > and the background color, but does not right align the
    > floating box with text wrapping around. The text size
    > appears the same as the <p> tag; not 90% smaller. The
    > float and clear CSS tag have me a bit confused as well.
    > Please let me know if you lead me in the right direction.
    > My CSS follows.
    >
    > <div class="floater">
    > <p>.*</p>
    > </div>
    >
    > div.floater {
    > width: 35%;
    > margin: 8px 8px;
    > margin-left: 8px;
    > padding: 10px;
    > border: 1px solid #6699FF;
    > background-color: #BBD2FF;
    > font-size: 90%;


    You're missing the most important bit:
    float:right;

    > clear: right;
    > }


    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Dec 1, 2004
    #2
    1. Advertising

  3. Robert

    SpaceGirl Guest

    Els wrote:
    > Robert wrote:
    >
    >
    >>I am trying to create a floating box right aligned in CSS.
    >>Text should flow around the box (or to the left). The
    >>inspiration for the technique came from
    >>http://www.quirksmode.org/. Check the link out for an
    >>example of my objective.
    >>
    >>My CSS code is not as elegant though. It creates the border
    >>and the background color, but does not right align the
    >>floating box with text wrapping around. The text size
    >>appears the same as the <p> tag; not 90% smaller. The
    >>float and clear CSS tag have me a bit confused as well.
    >>Please let me know if you lead me in the right direction.
    >>My CSS follows.
    >>
    >><div class="floater">
    >><p>.*</p>
    >></div>
    >>
    >>div.floater {
    >> width: 35%;
    >> margin: 8px 8px;
    >> margin-left: 8px;
    >> padding: 10px;
    >> border: 1px solid #6699FF;
    >> background-color: #BBD2FF;
    >> font-size: 90%;

    >
    >
    > You're missing the most important bit:
    > float:right;
    >
    >
    >> clear: right;
    >> }

    >
    >


    *waves* stop by for a coffee sometime! :D

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
     
    SpaceGirl, Dec 1, 2004
    #3
  4. Robert

    Els Guest

    SpaceGirl wrote:

    > Els wrote:
    >> You're missing the most important bit:
    >> float:right;

    >
    > *waves* stop by for a coffee sometime! :D


    I have no time! :-(

    I'll try and come round for Tea after next week ;-)

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Dec 1, 2004
    #4
  5. Robert

    mscir Guest

    SpaceGirl wrote:

    > Els wrote:
    > > Robert wrote:
    > >
    > >> I am trying to create a floating box right aligned in CSS.
    > >> Text should flow around the box (or to the left). The
    > >> inspiration for the technique came from
    > >> http://www.quirksmode.org/. Check the link out for an
    > >> example of my objective.
    > >> My CSS code is not as elegant though. It creates the border
    > >> and the background color, but does not right align the
    > >> floating box with text wrapping around. The text size
    > >> appears the same as the <p> tag; not 90% smaller. The
    > >> float and clear CSS tag have me a bit confused as well.
    > >> Please let me know if you lead me in the right direction.
    > >> My CSS follows.
    > >> <div class="floater">
    > >> <p>.*</p>
    > >> </div>
    > >>
    > >> div.floater {
    > >> width: 35%;
    > >> margin: 8px 8px;
    > >> margin-left: 8px;
    > >> padding: 10px;
    > >> border: 1px solid #6699FF;
    > >> background-color: #BBD2FF;
    > >> font-size: 90%;

    > >
    > > You're missing the most important bit:
    > > float:right;

    >

    On my IE6 "contents" displays on the left under the "QuirksMode" text,
    and when it is clicked on (expanded) it shoves down ALL page content
    below the bottom border.

    I like this example:

    http://www.stunicholls.myby.co.uk/layouts/fixed.html

    Mike
     
    mscir, Dec 1, 2004
    #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. mit
    Replies:
    1
    Views:
    836
    Ramu Pulipati
    Jan 25, 2006
  2. =?Utf-8?B?QW5nZWw=?=

    COMBO BOX INSTEAD OF DROP DOWN BOX

    =?Utf-8?B?QW5nZWw=?=, Jun 29, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    639
    Ken Cox [Microsoft MVP]
    Jun 29, 2004
  3. Tamlyn Rhodes
    Replies:
    3
    Views:
    1,027
    Andy Dingley
    Feb 26, 2004
  4. Gnarlodious
    Replies:
    4
    Views:
    17,681
    elizas
    May 5, 2010
  5. teeshift
    Replies:
    2
    Views:
    284
    Chris Pearl
    Dec 1, 2006
Loading...

Share This Page