<pre> alternative

C

Christian Comeau

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
 
C

Christian Comeau

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
 
W

William Hamby

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}
 
S

Steve Pugh

William Hamby 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.

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
 
W

William Hamby

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

Steve Pugh

William Hamby said:
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
 
A

Andy Dingley

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 ?
 
S

Steve Pugh

Andy Dingley said:
Yes, but what _actually_ happens ? :cool:

Well really. Worrying about actual practical stuff when there's a good
theoretical discussion to be had.
I don't have a Mac - what does Mac IE if you feed it an <img> without
explicit width by CSS ?

I think it's fine. Whilst we see a lot of posts about <div>s not
floating as authors think they should I can't recall one about images.

Steve
 
T

tm

Andy Dingley said:
Yes, but what _actually_ happens ? :cool:

I don't have a Mac - what does Mac IE if you feed it an <img> without
explicit width by CSS ?

It works properly.
 
N

Nick Theodorakis

Yes, but what _actually_ happens ? :cool:

I don't have a Mac - what does Mac IE if you feed it an <img> without
explicit width by CSS ?

It's been a couple of years since I looked, but I do remember running
into the Mac IE5 float/width problem back when I had an easy access to
a Mac. My recollection is that it had no trouble with just an <img> in
a float -- even if no explicit width was specified (either by CSS or
by the width attribute). It didn't matter if you floated the <img>
itself or wrapped it in a <div> with no width (and with no other
content). However, if you took that <img>, put it in a floated block
and added a caption a <p> element (all within the <div>), then the
floated <div> width went to 100% of the width of its container.

I remember this because at the time there was someone who was
documenting MacIE5 bugs; I thought this was one, but she was able to
convince me that MacIE5 was actually following the CSS2.0 spec.

Nick
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top