floating box in CSS

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

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

<div class="floater">

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

Re: floating box in CSS

Robert wrote:

Quoted text here. Click to load it

You're missing the most important bit:

Quoted text here. Click to load it

http://locusmeus.com /
Sonhos vem. Sonhos vo. O resto imperfeito.
                             - Renato Russo -

Re: floating box in CSS

Els wrote:
Quoted text here. Click to load it

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

Re: floating box in CSS

SpaceGirl wrote:

Quoted text here. Click to load it
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:



Site Timeline