17 replies [Last post]
sajlent
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-07-15
Posts: 10
Points: 0

I am trying to divide a list in two columns. So far I came up with a solution when list-items from a left column are floated to left. This works well unless I put a left-floated block element (eg.img) in a list-item from a right column. Because it is not aligned ( in Firefox) to the left of the parent element ie. li element as desired but to other floated elements ie. li elements from the left column. As far as I understand I would need to specify a new floating context to avoid this behaviour. But I've got no idea how.
Here is the code snippet:

<head>
<style type='text/css'>

li {	
	border: 1px solid blue;
	width: 200px;
}

.left {	
	margin-right: 15px;
	float: left;
	clear: left;
}

.right {
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid red;
	width: 500px;
}

p {
	float: left;
}

</style>

<body>
<ul id='obal'>
<li class='left'>1</li>
<li class='left'>2</li>
<li class='left'>3</li>
<li class='right'><p>floated</p>4</li>
<li class='right'>5</li>
<li class='right'>6</li>
</ul>
</body>

Do you have any idea how to continue? Or better do you know how to reach it in other way.
Thx a lot.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

list in two columns

Is that all your code, or just the relevant bits?

Verschwindende wrote:
  • CSS doesn't make pies

sajlent
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-07-15
Posts: 10
Points: 0

list in two columns

It is a code I use now for testing. It is complete.
It may be useful to mention that the code works as I wish on IE (but probably thanks to the unproper implementation of CSS) but not in Firefox.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

list in two columns

sajlent wrote:
It is a code I use now for testing. It is complete.
It may be useful to mention that the code works as I wish on IE (but probably thanks to the unproper implementation of CSS) but not in Firefox.

It's not complete; it's missing doctypes, sectioning, etc. This is why, as you've said, it works in IE.

Get the necessary valid code and we'll be more than willing to help you.

Verschwindende wrote:
  • CSS doesn't make pies

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 9 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

list in two columns

sajlent:

This may be a moot point, but you have been asked and have confirmed this code is complete. I don't see #obal in the styles, yet it has been applied as an id to <ul>.

You also have this:
<li class='right'><p>floated</p>4</li>
yet for <p> you have:
p {
float: left;
}

There is no style for class="right". You should not embed <p>s within <li>s. Let the class style for the <li> handle that.

After a "logic" validation you should be able to fix it. By the merest chance IE thinks it knows what you want and you're happy with what it has done. FX on the other hand has shrugged its shoulders and turned its back on you. FX will welcome you back, though, with great approbation, and render semantic, well-formed code just as you want - provided you also give it a proper doctype. If there is a doctype on this page, you have not shared it with us Wink

sajlent
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-07-15
Posts: 10
Points: 0

list in two columns

OK. Thanks for comments and advices. However, my question and hopes for help are still the same.

Here I post the HTML and CSS valid code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<title>Example</title>
<style type='text/css'>

li {	
	border: 1px solid blue;
	width: 200px;
}

.left {	
	margin-right: 15px;
	float: left;
	clear: left;
}


ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid red;
	width: 500px;
}

img {
	float: left;
}

</style>
</head>

<body>
<ul>
<li class='left'>1</li>
<li class='left'>2</li>
<li class='left'>3</li>
<li><img src='pic.jpg' alt='Image' />4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 9 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

list in two columns

Okay - we progress. Please put up an attachment of the image. You have not given any height/width declarations for it. So we cannot see how an image of indeterminate size works for you.

sajlent
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-07-15
Posts: 10
Points: 0

list in two columns

The image should be 40x40 pixs.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 9 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

list in two columns

So I made my own image - a black rectangle 40x40pixels.
Your code suggests this image should reside to the left of the relevant <li> and it looks like it is supposed to be an icon. Try this code and see the attachments for how it looks in IE and FF. You will then have to experiment with margin/padding/text-size and line-height to tidy it up.

li {    
   border: 1px solid blue; 
   width: 200px;
	height: 40px;
	 }

.left {    
   margin-right: 15px; 
   float: left; 
   clear: left; 
} 


ul { 
   margin: 0; 
   padding: 0; 
   list-style: none; 
   border: 1px solid red; 
   width: 500px; 
} 

/*img { 
   float: left; 
} */ /* this is the culprit*/

</style> 
</head> 

<body> 
<ul> 
<li class='left'>1</li> 
<li class='left'>2</li> 
<li class='left'>3</li> 
<li><img src='saljent.jpg' alt='Image' height:"40" width:"40" />4</li> 
<li>5</li> 
<li>6</li> 
</ul> 
</body> 
</html>

sajlent
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-07-15
Posts: 10
Points: 0

list in two columns

I am sorry, it was not obvious from the code I posted before but a text inside li elements can be longer over more lines. So I think I really need img element to be floated.

<li><img src='sajlent.jpg' alt='Image' height:"40" width:"40" />4 Lorem ipsum dolor sit amet, consectetuer...</li>

Also we don't have to consider only my code and approach, any idea about how to split a list into two columns where li elements can contain floated imgs would be helpful.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 9 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

list in two columns

](*,) Sorry, it's too hot for this (Brit wimp that I am). Await the arrival of a guru.

sajlent
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-07-15
Posts: 10
Points: 0

list in two columns

Wink Anyway thanks for helping. I also have to go now, it's hot in Prague too and the weekend is starting... Hopefully, monday will bring us more ideas.

sajlent
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-07-15
Posts: 10
Points: 0

list in two columns

I'm still trying to figure out how to solve this problem. I thought it is quite a common problem but I could not find on Internet any appropriate general solution.
Any new suggestions?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 2 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

list in two columns

Having related columns side by side, like a continued list, is a print method. For the most part, it is not a suitable web device. Consider that you may read down one column, only to scroll up to find your place in the next column.

If a single list is too long for a single column, perhaps you haven't properly considered the makeup of the list. For the web, compactness of content (I don't mean crowding stuff together) is an aid to usability.

Having said that, here's the html structure and styling I might use. The key is to first write well structured and semantic html. In this case, because I was breaking the list into two columns, I used two sub lists. From there, I simply added style rules. If your text will not wrap the floated image(Drunk, you may have problems clearing the next list-item. We can deal with that in another thread.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-1" />

  <title>2 col list</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

ol {
    list-style-type: upper-roman;
    }

li {
    margin: 1em 0;
    }

li img {
    float: left;
    }

.flot {
    width: 15em;
    float: left;
    }

/*]]>*/

</style>
</head>

<body>
  <ul>
    <li>
      <ol class="flot" start="1">
        <li>
          <p>This is a two paragraph list item. The second paragraph
          will have an image floated to the left.</p>

          <p><img src="../bullseye.jpg"
               height="40"
               width="40"
               alt="" />And this is the second paragraph. Text may 
               extend long enough to wrap around the image.</p>

        </li>

        <li>This is a simple list item.</li>

        <li>Same here.</li>
      </ol>
    </li>

    <li>

      <ol class="flot" start="4">
        <li>A simple list item</li>

        <li><p><img src="../bullseye.jpg"
               height="40"
               width="40"
               alt="" />This is a two paragraph list item. This paragraph
          has an image floated to the left.</p>

          <p>And this is the second paragraph. Text should                extend long enough to wrap around the image.</p></li>

        <li>The last list item</li>

      </ol>
    </li>
  </ul>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sajlent
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-07-15
Posts: 10
Points: 0

list in two columns

It was my goal to write a well-structured and semantic code, that's why I did not want to split one list into two ul elements. And I wanted to do this only via css.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 2 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

list in two columns

Well, the problem is that you want

1 4
2 5
3 6

To get the columns, 123 and 456 to align properly, they must be treated as groups. The rules don't allow ul or ol to contain anything but li elements. The only way to group them, then, is as sub-lists. Which is what I did.

If you had wanted

1 2
3 4
5 6,

or

x x
x x
x x,

you could simply float the lis, right and left. You could re-order the list as 1 4 2 5 3 6, but that's not at all semantic or well structured since you indicated an ordered set of columns.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sajlent
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-07-15
Posts: 10
Points: 0

list in two columns

Thx Gary and others for helping.
It really seems there is no other way to accomplish it than splitting the list into two separated ol or ul elements.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 2 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

list in two columns

To keep both parts of the related, make them sub lists. If you separate them completely, you'll have accessibility issues.

CSS3 promises flowed columns which will do what you want, but don't hold your breath. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.