<pre> alternative

Discussion in 'HTML' started by Christian Comeau, Apr 13, 2005.

  1. 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
    Christian Comeau, Apr 13, 2005
    #1
    1. Advertising

  2. > 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
    Christian Comeau, Apr 13, 2005
    #2
    1. Advertising

  3. 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, Apr 14, 2005
    #3
  4. Christian Comeau

    Steve Pugh Guest

    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/>
    Steve Pugh, Apr 14, 2005
    #4
  5. 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, Apr 14, 2005
    #5
  6. Christian Comeau

    tm Guest

    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.
    tm, Apr 14, 2005
    #6
  7. 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, Apr 14, 2005
    #7
  8. Christian Comeau

    Steve Pugh Guest

    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/>
    Steve Pugh, Apr 14, 2005
    #8
  9. Christian Comeau

    Andy Dingley Guest

    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, Apr 14, 2005
    #9
  10. Christian Comeau

    Steve Pugh Guest

    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/>
    Steve Pugh, Apr 14, 2005
    #10
  11. Christian Comeau

    tm Guest

    William Hamby wrote:
    > tm said:


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

    >
    > 5, 5.1, and 5.2


    How long you figure you'll be able to keep at this?
    tm, Apr 14, 2005
    #11
  12. Christian Comeau

    Andy Dingley Guest

    On Thu, 14 Apr 2005 13:50:22 +0100, Steve Pugh <> wrote:

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



    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 ?
    Andy Dingley, Apr 14, 2005
    #12
  13. Christian Comeau

    Steve Pugh Guest

    Andy Dingley <> wrote:
    >On Thu, 14 Apr 2005 13:50:22 +0100, Steve Pugh <> wrote:
    >
    >>>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

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

    --
    "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/>
    Steve Pugh, Apr 14, 2005
    #13
  14. Christian Comeau

    tm Guest

    In article <>,
    Andy Dingley <> wrote:

    > On Thu, 14 Apr 2005 13:50:22 +0100, Steve Pugh <> wrote:
    >
    > >>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

    >
    >
    > 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.
    tm, Apr 15, 2005
    #14
  15. On Thu, 14 Apr 2005 15:34:59 +0100, Andy Dingley
    <> wrote:

    >On Thu, 14 Apr 2005 13:50:22 +0100, Steve Pugh <> wrote:
    >
    >>>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

    >
    >
    >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
    --
    Nick Theodorakis

    contact form:
    http://theodorakis.net/contact.html
    Nick Theodorakis, Apr 15, 2005
    #15
    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. Rocky Moore
    Replies:
    7
    Views:
    1,720
    mikeb
    Jan 14, 2004
  2. =?Utf-8?B?S2V2aW4gQnVydG9u?=

    Pre-Send Request Headers, Pre-Send Request Content

    =?Utf-8?B?S2V2aW4gQnVydG9u?=, Dec 31, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    1,031
    =?Utf-8?B?S2V2aW4gQnVydG9u?=
    Dec 31, 2004
  3. Wladimir Borsov
    Replies:
    7
    Views:
    465
    Raymond Loman
    May 5, 2004
  4. Juha Nieminen
    Replies:
    3
    Views:
    1,133
    Juha Nieminen
    Feb 22, 2008
  5. Chris M. Thomasson
    Replies:
    10
    Views:
    639
    Nobody
    Aug 29, 2009
Loading...

Share This Page