table converted into nested divs looks terrible in NS7

[llizard]

I am trying to convert a table that has two different coloured cells side by side into div(s). I feel like I'm close, but alas, no cigar....

The table and div versions look exactly the same as each other in IE6 and Opera7. They look almost the same in NS4 (there is a rather large white border around the righthand div). But in NS7 and Firefox, the Div version looks completely and utterly ridiculous. I'm trying to get both versions to look the same (or close) as the table in as many CSS browsers as possible. The only one that I'm not very concerned about is NS4.

Here is the link to see the table and div versions:
http://llizard.crosswinds.net/tablevsdiv.html

Also, the font size is inexplicably smaller in the Div version in everything but IE6. (Yes, I'm aware that it's really no good if IE6 managed to guess correctly at what I am trying to do.)

Many thanks for any ideas.

[coder_seth]

you've got nothing to clear the floated elements within the container <div>, so it looks ridiculous because your floats are taken out of the normal flow, thus the container doesn't wrap around them.

you could achieve that layout using a container and ONE child div with much less fuss, but you will still either need to clear the floated div, or set a fixed height on the container.

[ronaldb66]

I don't know about the single child, but if you're comfortable with the links div coming before the content div in the source (as it is now), you can suffice with just floating the links div and keeping the content div in the normal flow. The content div will set the proper height for the container div. I don't know if this still works if the floated div is taller, though. In any way, give the content div a sufficiently large left margin to stay away from the floated one (set width plus a little extra).

[llizard]

Thank you coder_seth and ronaldb66 for the replies.

Okay, I've tried both single child and two children with only one of them floating. Things have improved but are still not exactly as I had envisioned. Setting a height is not really a good idea as the "table" will be used on various pages and have different numbers of links. It will be much better for the div with the listed links to set the height. (The line break after some links are so that nonCSS will still be able to read (and make sense) of the "table".)

Div 2a has a white border around the right blue one

<div class="second">some links:
<div class="right">
<br>
<a href="#" class="blue">Blah Blah Blah Blah Blah Blah</a><br><br>
[...]
<a href="#" class="blue">Blah Blah Blah Blah Blah</a>
</div><br style="clear:right">
</div>



Div 3 has a white border running across the top of the left blue.

<div class="third"><div class="left3">some links:</div>
<div class="right3">
<br>
<a href="#" class="blue">Blah Blah Blah Blah Blah Blah</a><br><br>
[...]
<a href="#" class="blue">Blah Blah Blah Blah Blah</a>
</div><br style="clear:right">
</div>


Here again is the link to see the table and div versions:
http://llizard.crosswinds.net/tablevsdiv.html

(Still the font size is inexplicably smaller in the div versions than in the table version)

[coder_seth]

single child would work just fine.. you've got one set of content in the parent, the other in the child.. same layout, less markup, less CSS..

[me']

Well, don't you think more appropriate markup would be this?<div id="somelinks">
<h2>Some Links</h2>
<ul>
<li><a>Hello World</a></li>
...
</ul>
</div>Then some simple CSS:div#somelinks ul { float: right; width: 50%; background-color: #fcc; }
div#somelinks { background-color: #ffc }*untested*

[coder_seth]

who is "you"? several people posted in here so far..

if me, i hadn't really thought about it that much. not interested in helping them do their markup this time, just looking at the layout.. shapes of boxes..

:|

[me']

who is "you"? several people posted in here so far..Well, everyone I suppose.if me, i hadn't really thought about it that much. not interested in helping them do their markup this time, just looking at the layout.. shapes of boxes.. Yeah, but I prefer to offer a better solution if the basic, cheap and cheerful solution has already been offered.

[coder_seth]

more specific != better m8

[llizard]

And again, thank you all for the responses.

single child would work just fine.. you've got one set of content in the parent, the other in the child.. same layout, less markup, less CSS..

But as far as I can see (if I understand "single child" correctly), single child is NOT working.

Please take a look at div version 3
http://llizard.crosswinds.net/tablevsdiv.html

me', that is a novel idea. Sadly it doesn't appear to work at all. I'm pretty sure that I followed the plan that you outlined.

Please take a look at div version 5
http://llizard.crosswinds.net/tablevsdiv.html

I must say that I'm getting a tiny bit frustrated. It's not that I want people to do the work for me. If it is any consolation, I did not show a number of failed versions that I had already tried. I just thought that you guys who are expert in this field may have run across something similar and be able to help out. CSS is new to me and I'm very close to giving up on switching from using tables for this layout.

[coder_seth]

hey whoa whoa.. who you callin' expert? ;) i'll look at it and let you know what i think.

okay, paying more attention to the specifics.. if you really want to go all out, 'me has indeed offered the best approach

markup something like this:


<div id="some_links">
<h2>some links</h2>
<ul>
<li>link 1...</li>
<li>etc...</li>
</ul>
</div>


then, use CSS to:

-float the <h2> (or h3, whatever suits you) left and fix its width to what you want that left 'column' to be
-style the list with that blue background, remove the bullets with list-style: none, etc. etc.

should work beautifully. or you could flloat the list instead of the header, as he suggests.. i don't know of any clear benefits either way.

[llizard]

And again, thank you for the reply. What??? You mean you guys aren't experts??? Eeek. Please don't tell me that I have to try to comprehend whatever language the folks at w3c speak! ;^)


should work beautifully. or you could flloat the list instead of the header, as he suggests.. i don't know of any clear benefits either way.

Should indeed. But if I am understanding correctly, it doesn't work beautifully at all.

Please reload the page and take a look at
http://llizard.crosswinds.net/tablevsdiv.html#vers5
and
http://llizard.crosswinds.net/tablevsdiv.html#vers6

to see how far off it is.

[AaronW]

Heh, my attempt:


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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>

<style type="text/css">
.divTable {
width: 80%;
border: 5px solid #f00;
}
.divTable .caption {
float: left;
height: auto;
background-color: #fff;
}
.divTable .content {
width: 80%;
background-color: #ccc;
float: right;
}
.spacer {
float: none;
clear: both;
}
</style>

<script type="text/javascript">
</script>
</head>

<body>
<div class="divTable">
<div class="caption">
<p>Some Links:</p>
</div>
<div class="content">
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
</div>
<div class="spacer"></div>
</div>
</body>
</html>

[llizard]

Aaron, you are brilliant! Many thanks. That looks great!

As it turns out, I was close with the very first attempt. All I had to do was replace the width spec in the left hand div with height:auto;.

Thank you all once again for the help.

[AaronW]

Heh, so it worked then?

Pardon my class-itis (;))

The only difference from that and your table is that the caption layer doesn't wrap when it should (like your table). May or may not be a problem. If so, I'll try to get it to wrap.

[llizard]

The only difference from that and your table is that the caption layer doesn't wrap when it should (like your table). May or may not be a problem. If so, I'll try to get it to wrap.

Yes, it works beautifully, Aaron. Thanks again. For the purposes that I will be using that table, it isn't necessary for the caption layer to wrap.

But now, of course, I'm curious. Why doesn't it wrap and/or how does one get it to wrap?

[AaronW]

It doesn't wrap because neither layer is in the flow of the other. Therefore, they aren't "consious" of the others' existance. So when you resize the "table", they just slide over eachother.

[llizard]

It doesn't wrap because neither layer is in the flow of the other. Therefore, they aren't "consious" of the others' existance. So when you resize the "table", they just slide over eachother.


Aha, I see. Could one use display:table in divTable to somehow get them to be "conscious" of each others' existances?

[AaronW]

Display: table doesn't work in IE I don't think, and that wouldn't do it anyway, because the two layers are floated, and when you float something its taken out of the flow of other elements.

[llizard]

Display: table doesn't work in IE I don't think, and that wouldn't do it anyway, because the two layers are floated, and when you float something its taken out of the flow of other elements.

Ah well, that's life.

You're right Aaron, it seems that display:table doesn't work on IE. I'll just have to remember that wrapping will not occur in that table replacement.

Thanks again for the help.

I just took a look at
http://www.quirksmode.org/css/display.html
to see more about display - very useful site!