CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS 2-column layout

Discuss CSS 2-column layout in the CSS Help forum on Dev Shed.
CSS 2-column layout Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Page 1 of 2 1 2 >
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 23rd, 2004, 09:00 AM
tomchadwin tomchadwin is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 72 tomchadwin User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 22 m
Reputation Power: 5
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
Reply With Quote
  #2  
Old February 23rd, 2004, 09:12 AM
tomchadwin tomchadwin is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 72 tomchadwin User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 22 m
Reputation Power: 5
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
Reply With Quote
  #3  
Old February 23rd, 2004, 09:37 AM
RawShark RawShark is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: QUEBEC
Posts: 29 RawShark User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
try this :
blah blah blah blah blah blah blah blah blah blah
<img src="pix.jpg" align=right> blah blah blah
Reply With Quote
  #4  
Old February 23rd, 2004, 09:41 AM
tomchadwin tomchadwin is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 72 tomchadwin User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 22 m
Reputation Power: 5
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
Reply With Quote
  #5  
Old February 23rd, 2004, 09:51 AM
RawShark RawShark is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: QUEBEC
Posts: 29 RawShark User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation 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.
Reply With Quote
  #6  
Old February 23rd, 2004, 09:51 AM
RawShark RawShark is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: QUEBEC
Posts: 29 RawShark User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation 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.
Reply With Quote
  #7  
Old February 23rd, 2004, 02:13 PM
INF INF is offline
Standards User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Posts: 146 INF User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 6 m 4 sec
Reputation Power: 6
Reply With Quote
  #8  
Old February 23rd, 2004, 04:30 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,585 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 16 h 15 m 44 sec
Reputation Power: 662
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.
Reply With Quote
  #9  
Old February 24th, 2004, 04:45 AM
tomchadwin tomchadwin is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 72 tomchadwin User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 22 m
Reputation Power: 5
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
Reply With Quote
  #10  
Old February 24th, 2004, 04:50 AM
tomchadwin tomchadwin is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 72 tomchadwin User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 22 m
Reputation Power: 5
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
Reply With Quote
  #11  
Old February 24th, 2004, 07:58 AM
tomchadwin tomchadwin is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 72 tomchadwin User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 22 m
Reputation Power: 5
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
Reply With Quote
  #12  
Old February 24th, 2004, 11:29 AM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,585 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 16 h 15 m 44 sec
Reputation Power: 662
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
Reply With Quote
  #13  
Old February 24th, 2004, 01:41 PM
INF INF is offline
Standards User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Posts: 146 INF User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 6 m 4 sec
Reputation Power: 6
Interesting.

kk5st -
Great Sig!
Reply With Quote
  #14  
Old February 24th, 2004, 01:51 PM
DaWei_M's Avatar
DaWei_M DaWei_M is offline
Permanently Banned
Dev Shed God 5th Plane (7000 - 7499 posts)
  
Join Date: Jan 2004
Location: Central New York. Texan via Arizona, out of his element!
Posts: 7,351 DaWei_M User rank is Sergeant (500 - 2000 Reputation Level)DaWei_M User rank is Sergeant (500 - 2000 Reputation Level)DaWei_M User rank is Sergeant (500 - 2000 Reputation Level)DaWei_M User rank is Sergeant (500 - 2000 Reputation Level)DaWei_M User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 2 Weeks 1 Day 19 h 39 m 7 sec
Warnings Level: 10
Number of bans: 1
Reputation Power: 0
None of 'em lined up precisely, for me. Some were way off. Mozilla/Thunderbird, latest.
Reply With Quote
  #15  
Old February 24th, 2004, 05:22 PM
Glide Glide is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2003
Posts: 56 Glide User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
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 {
            width: 30em;
            margin-top: 0em;
            margin-bottom: 1em;
        }

        .imageCol {
            float: right;
            clear: right;
        }

        .imageCol img {
            display: block;
        }
    -->
    </style>

    <body>
        <p 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>
        <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&n