floating box in CSS

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

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

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

SpaceGirl wrote:

> Els wrote:
>> You're missing the most important bit:
>> float:right;
>
> *waves* stop by for a coffee sometime!

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 -

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