Help with CSS rows and columns

[kibosh]

Hello,

I want to create a layout that has a header, footer, and body with two columns. I can do the header/footer fine, but the body is tricky. The body will contain information about my members in two columns; one column holds a picture, the other text about them. I want the order to switch on alternating lines like this:

image text.text.text.text
text.text.text.text image


The text sections are variable in height and generally taller than the image. I think this is breaking my format because things aren't lining up properly. The text blocks are working, but the second picture is displaying under the first image, not to the right of the second text block. It looks fine in DW MX 2004 and IE, but not Firefox. Here is my CSS related to this:

.left_pic {
float: left;
width: 150px;
}

.right_text {
float: right;
width: 510px;
}

.right_pic {
float: right;
width: 150px;
}

.left_text {
float: left;
width: 510px;
}

Any ideas how I can force the "right" image to display properly?

Thank you!

[kibosh]

I think I figured it out. I added a couple more div tags shown below:

.about_table {
display: table;
}

.about_row {
display: table-row
}

Is this proper CSS though? It seems to work, but I'm really trying to break free of using "tables".

[boogyman]

how are you declaring the "headers" for the users information.


.about_table {
display: table;
}

.about_row {
display: table-row
}

Is this proper CSS though? It seems to work, but I'm really trying to break free of using "tables".
the table value of the display function is not supported widely.

have you thought about using an unordered list with the css style display:inline ?

then you can use another style to float the image on the left / right



<div class="members right">
<ul>
<li>INFO TEXT</li>
<li>INFO TEXT</li>
<li>INFO TEXT</li>
</ul>
<img src="/path/to/image.ext" width="" height="" alt="__alt_desc__" title="__mouseover_text__">
</div>
<div class="members left">
<ul>
<li>INFO TEXT</li>
<li>INFO TEXT</li>
<li>INFO TEXT</li>
</ul>
<img src="/path/to/image.ext" width="" height="" alt="__alt_desc__" title="__mouseover_text__">
</div>

alt = textual representation of an image if the image cannot be displayed
title = text that the user sees when he/she mouses over the image



div.members {clear:both}
div.members ul li{
list-style: none;
display: inline;
}
div.right ul {float: left;}
div.right img {float: right}

div.left ul {float: right;}
div.left img {float:left;}

[kibosh]

how are you declaring the "headers" for the users information.


By headers, I assume you mean thead, correct. I hadn't done that. Is it necesary?




have you thought about using an unordered list with the css style display:inline ?

then you can use another style to float the image on the left / right



<div class="members right">
<ul>
<li>INFO TEXT</li>
<li>INFO TEXT</li>
<li>INFO TEXT</li>
</ul>
<img src="/path/to/image.ext" width="" height="" alt="__alt_desc__" title="__mouseover_text__">
</div>
<div class="members left">
<ul>
<li>INFO TEXT</li>
<li>INFO TEXT</li>
<li>INFO TEXT</li>
</ul>
<img src="/path/to/image.ext" width="" height="" alt="__alt_desc__" title="__mouseover_text__">
</div>

alt = textual representation of an image if the image cannot be displayed
title = text that the user sees when he/she mouses over the image



div.members {clear:both}
div.members ul li{
list-style: none;
display: inline;
}
div.right ul {float: left;}
div.right img {float: right}

div.left ul {float: right;}
div.left img {float:left;}


Interesting. I like this approach. It seems much more elegant. I do have a question though.When naming a class like this <div class="members right">, do both names apply seperately? It looks like you are applying CSS as .members and .right. Am I correct?

Thank you

[boogyman]

that is correct, by separating the words with a space you are assigning the element to two classes. it would be the same as if you were to declare it incorrectly as below


<div class="members" class="right">