«

Hello,

I am trying to find a way, other than an invisible table, to position a
block of text to the right of a title or a picture without it wrapping
around the title or the picture. For example:

Address: Street Address
City
Province
Postal Code

I know I can achieve this with the <pre> tag, but it doesn't work well if I
change the font to something that is not fixed-pitch.

Any suggestions?

Thanks!

Christian

> Address: Street Address
> City
> Province
> Postal Code

Just in case you don't see it like that, City, Province and Postal Code
should be aligned with Street.

Christian

On 2005-04-13 18:19:56 -0400, Christian Comeau <> said:

>> Address: Street Address
>> City
>> Province
>> Postal Code
>
> Just in case you don't see it like that, City, Province and Postal Code
> should be aligned with Street.
>
> Christian

I'm assuming that you're simply displaying data you already have. If
you're trying to offer a form to be filled out, say so.

markup...
<div>
<div class="left">
<p>address<p>
</div>
<div class="right">
<p>street address</p>
<p>city</p>
<p>province</p>
<p>postal code</p>
</div>
<div style="clear:both">
</div>

</div>

css...
..left {float:left}
..right {float:right}

William Hamby <> wrote:
>On 2005-04-13 18:19:56 -0400, Christian Comeau <> said:
>
>>> Address: Street Address
>>> City
>>> Province
>>> Postal Code
>>
>> Just in case you don't see it like that, City, Province and Postal Code
>> should be aligned with Street.
>
><div>
> <div class="left">
> <p>address<p>
> </div>
> <div class="right">
> <p>street address</p>
> <p>city</p>
> <p>province</p>
> <p>postal code</p>
> </div>
> <div style="clear:both">
> </div>
>
></div>
>
>css...
>.left {float:left}
>.right {float:right}

Any browser that follows CSS 2 rules rather than CSS 2.1 (such as Mac
IE) will put the two divs one after the other as under CSS 2 you must
specify a width for all floated elements.

And unless the container has a constrained width this method may
create an uncomfortable space between the 'address' and the rest of
the content.

Floating the 'address' left and giving the rest of the content a
margin-left in em would be closer to what the OP was asking for but
would run the risk of breaking when the font used by the user's
browser was particularly different to that used to work out the em
width to specify.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

On 2005-04-13 19:57:06 -0400, Steve Pugh <> said:

>> <div>
>> <div class="left">
>> <p>address<p>
>> </div>
>> <div class="right">
>> <p>street address</p>
>> <p>city</p>
>> <p>province</p>
>> <p>postal code</p>
>> </div>
>> <div style="clear:both">
>> </div>
>>
>> </div>
>>
>> css...
>> .left {float:left}
>> .right {float:right}
>
> Any browser that follows CSS 2 rules rather than CSS 2.1 (such as Mac
> IE) will put the two divs one after the other as under CSS 2 you must
> specify a width for all floated elements.

I've successfully used the above code numerous times and found no
problems with it in IE5/Mac - or any other browser for that matter.

William Hamby <> wrote:
> Steve Pugh <> said:

> >> <div>
> >> <div class="left">
> >> <p>address<p>
> >> </div>
> >> <div class="right">
> >> <p>street address</p>
> >> <p>city</p>
> >> <p>province</p>
> >> <p>postal code</p>
> >> </div>
> >> <div style="clear:both">
> >> </div>
> >>
> >> </div>
> >>
> >> css...
> >> .left {float:left}
> >> .right {float:right}

> > Any browser that follows CSS 2 rules rather than CSS 2.1 (such as Mac
> > IE) will put the two divs one after the other as under CSS 2 you must
> > specify a width for all floated elements.
>
> I've successfully used the above code numerous times and found no
> problems with it in IE5/Mac - or any other browser for that matter.

Interesting. Must be a different version of IE5 Mac.

On 2005-04-14 02:53:54 -0400, tm <> said:

> Interesting. Must be a different version of IE5 Mac.

5, 5.1, and 5.2

William Hamby <> wrote:
>On 2005-04-13 19:57:06 -0400, Steve Pugh <> said:
>> William Hamby <> wrote:
>>>
>>> css...
>>> .left {float:left}
>>> .right {float:right}
>>
>> Any browser that follows CSS 2 rules rather than CSS 2.1 (such as Mac
>> IE) will put the two divs one after the other as under CSS 2 you must
>> specify a width for all floated elements.
>
>I've successfully used the above code numerous times and found no
>problems with it in IE5/Mac - or any other browser for that matter.

Care to post the URL of one of these sites where you've used this?

Because this is your code:
http://steve.pugh.net/test/test90.html
and this how Mac IE displays it:
http://steve.pugh.net/test/test90.jpg

We get questions about this very issue quite regularly in this
newsgroup. Stick around and tell the next person wondering about this
that the problem doesn't exist, I'm sure that will make them feel much
better.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

On Thu, 14 Apr 2005 00:57:06 +0100, Steve Pugh <> wrote:

>Any browser that follows CSS 2 rules rather than CSS 2.1 (such as Mac
>IE) will put the two divs one after the other as under CSS 2 you must
>specify a width for all floated elements.

What happens with an element (like <img>) that has a width that's
implicit by a non-CSS route ?

Andy Dingley <> wrote:

>On Thu, 14 Apr 2005 00:57:06 +0100, Steve Pugh <> wrote:
>
>>Any browser that follows CSS 2 rules rather than CSS 2.1 (such as Mac
>>IE) will put the two divs one after the other as under CSS 2 you must
>>specify a width for all floated elements.
>
>What happens with an element (like <img>) that has a width that's
>implicit by a non-CSS route ?

"A floated box must have an explicit width (assigned via the 'width'
property, or its intrinsic width in the case of replaced elements)."
http://www.w3.org/TR/CSS2/visuren.html#floats

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>