Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    72
    Rep Power
    11

    CSS 2-column layout


    Dear all

    I would like to be able to create a design with a text column and an image column. The text would be continuous in the left-hand column, and images would be displayed in the right-hand column. In other words, I would like to be able to use the following HTML:

    Code:
    <p>blah blah blah blah blah
    blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah
    <img src="test.jpg" />
    blah2 blah2 blah2 blah2 blah2 blah2
    blah2 blah2 blah2 blah2 blah2 blah2
    blah2.</p>
    I would like the text to appear continuously in the left-hand column, while the image appears at the correct point, but in the right-hand column. In other words, I would like the left-hand column (assuming I fixed its width) to contain the output:

    Code:
    blah blah blah blah blah
    blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah
    blah2 blah2 blah2 blah2 blah2 blah2
    blah2 blah2 blah2 blah2 blah2 blah2
    blah2.
    While the right-hand column will have the image, its top lining up with where the text changes to 'blah2'.

    Any ideas? I realize the most difficult thing about asking this question is describing the visual layout I want to achieve. I shall try to draw a mock-up, and post a link to it in this thread.

    Many thanks in advance,

    Tom
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    72
    Rep Power
    11
    To see an example of the kind of output I want, see:

    www.clearsight.info/css_problem/

    This was created using HTML tables, and is no good for two reasons:

    • I do not want to use tables for layout
    • in the code order of the HTML, the images are utterly out of position, and hence this will prove meaningless to screen readers or similar


    I hope this makes my query somewhat clearer.

    Cheers,

    Tom
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    QUEBEC
    Posts
    29
    Rep Power
    0
    try this :
    blah blah blah blah blah blah blah blah blah blah
    <img src="pix.jpg" align=right> blah blah blah
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    72
    Rep Power
    11
    Hi RawShark

    That's not quite what I am after, since the text then wraps round the image. I want the text and image to remain in their own columns. Or am I missing something in your suggestion?

    I think I might have cracked it, though:

    www.clearsight.info/css_problem/solution.htm

    Does that do the trick for everyone? I can proof it here on PC IE6, PC NS7, and PC Opera 7. I know it doesn't work in NS4, but it is still readable. I'll check it on the Mac when I get home tonight.

    Cheers,

    Tom
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    QUEBEC
    Posts
    29
    Rep Power
    0
    2 solutions, either create a 1pixel transparent gif image inserted into your script and then stretch it to fill whatever soace you need, or modify the original pics' canc=vas size to also fill the area. I'm sure there are more "scientific" ways of doing these spaces, but these two work just fine.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    QUEBEC
    Posts
    29
    Rep Power
    0
    2 solutions, either create a 1pixel transparent gif image inserted into your script and then stretch it to fill whatever space you need, or modify the original pics' canvas size to also fill the area. I'm sure there are more "scientific" ways of doing these spaces, but these two work just fine.
  12. #7
  13. No Profile Picture
    Standards User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    146
    Rep Power
    12
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I worked up something similar for margin-notes. The sides are opposite yours, and I dealt with text rather than images. Nevertheless, I believe you can easily modify the code to fit your needs. There are 3 variations.

    http://garyblue.port5.com/webdev/marginnotes.html

    http://garyblue.port5.com/webdev/marginnotes2.html

    http://garyblue.port5.com/webdev/marginnotes3.html

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    72
    Rep Power
    11
    RawShark: not sure I understand your second suggestion either, I'm afraid, without seeing it in action (must have my slow head on at the moment), but I do not want to use spacer GIFs (kicked the habit last year), nor alter images, since this is all for a CMS, and I do not want to rely on users having to carry out complex (to them) image formatting.

    INF: I know a certain amount about columnar layout via CSS, and also about absolute positioning. However, I do not want a page where the source code reads:

    complete column 1 contents
    complete column 2 contents

    but rather:

    paragraph 1
    image relevant to paragraph 2
    paragraph 2
    paragraph 3
    image relevant to paragraph 4
    paragraph 4
    paragraph 5

    The HTML, when linearized, has every element in the correct order, maintaining relevant context, vital for accessibility.

    I then want this to render as a two-column layout, continuous, normally spaced paragraphs in one column, and images alongside the relevant text in the right column.

    I think I have maybe achieved this (see my third post above).

    kk5st: Your solution sounds very much like what I am after (especially since I would like to be able to put image captions in the right-hand column), but none of your pages come up for me (DNS error). I'd really like to see it.

    Anyway, have a look at the following for my current solution, which I am pretty happy with:

    www.clearsight.info/css_problem/solution.htm

    If anyone can see any problems with this, I'd really like to know, since I would like to roll this out to my CMS installations ASAP.

    Thanks for all the help,

    Tom
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    72
    Rep Power
    11
    kk5st: Your pages came up now. From where I sit (IE6 PC), example 2 is the one which seems to work. Nice one. I'll have a closer look at it and see if I can get it to do what I want.

    Thanks,

    Tom
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    72
    Rep Power
    11
    A final solution, as worked out from the W3C:

    www.w3c.org/TR/CSS2/visuren.html#q29

    The last bit of this section tells you how to achieve this, using the example of a change bar.

    To see this method applied to the current problem, see:

    www.clearsight.info/css_problem/solution2.htm

    Seems to work in PC IE6, NS7.1, Moz1.4, Opera 7.11, and even in NS4 (pretty much - certainly good enough to be usable).

    If anyone has any comments or can find fault with this solution, do mention it.

    Thanks again,

    Tom
  22. #12
  23. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    What a novel (new to me, anyway) approach. Taking an inline element (the span) out of the flow for absolute positioning is elegant. I'll have to make time to play with this.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  24. #13
  25. No Profile Picture
    Standards User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    146
    Rep Power
    12
    Interesting.

    kk5st -
    Great Sig!
  26. #14
  27. Lord of Dorkness
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jan 2004
    Location
    Central New York. Texan via Arizona, out of his element!
    Posts
    8,524
    Rep Power
    3314
    None of 'em lined up precisely, for me. Some were way off. Mozilla/Thunderbird, latest.
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    56
    Rep Power
    12
    As the span is an inline element, you would probably see a layout improvement by making the user place the image span at the start of the paragraph so that the top of the image is aligned with the top of the paragraph.

    There also may be a problem with the captions appearing to the right of the picture on Mozilla browsers if the user were to place an image of less than the ".imageCol" width inside the span. You could correct this by setting the css property "display" to "block" for images (or for a class on your paragraph images to avoid affecting any images elsewhere in the site).

    Personally, I tend to prefer this approach.

    PHP Code:
    <html>
        <
    head></head>

        <
    style>
        <!--
            .
    main {
                
    width30em;
                
    margin-top0em;
                
    margin-bottom1em;
            }

            .
    imageCol {
                
    floatright;
                
    clearright;
            }

            .
    imageCol img {
                
    displayblock;
            }
        -->
        </
    style>

        <
    body>
            <
    class="main">
                
    Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
            </
    p>
            <
    class="main">
                <
    span class="imageCol"><img src="scottwilliams.jpg" alt="Blah2 image caption" />Blah2 image caption</span>
                
    Blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2    blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2.
            </
    p>
            <
    class="main">
                
    Blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3.
            </
    p>
            <
    class="main">
                <
    span class="imageCol"><img src="meisnerworkshop.jpg" alt="Blah4 image caption" />Blah4 image caption</span>
                
    Blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4 blah4.
            </
    p>
            <
    class="main">
                <
    span class="imageCol"><img src="scottwilliams.jpg" alt="Blah5 image caption" />Blah5 image caption</span>
                
    Blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5 blah5.
            </
    p>
        </
    body>
    </
    html
    Last edited by Glide; February 24th, 2004 at 05:26 PM. Reason: clarity
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo