css problem

[burntToast]

can anyone help me (direct me to resources or present a solution) with the following problem. I want to present 4 small images each with a short text next to it. The images and text should be laid out next to each other on two rows. If I would have used a table it would be

<table>
<tr><td>image</td><td>text</td><td>image</td><td>text</td></tr>
<tr><td>image</td><td>text</td><td>image</td><td>text</td></tr>
</table>

Seems simple enough with a table but causes me alot of problems and markup with divs and css.

[doodlebee]

Shouldn't cause problems in CSS...all you need are some floated divs and elements. For example (and this is off the top of my head - it'll probably need some editing!):

<div id="wrapper">
<div class="left">
<img src="image" />
Text here
</div>

<div class="right">
<img src="image" />
text here
</div>

<hr />

<div class="left">
<img src="image" />
Text here
</div>

<div class="right">
<img src="image" />
text here
</div>

<hr />
</div>

* {
margin:0;
padding:0;
border:none;
}

#wrapper {
width:750px;
margin:0 auto;
}

div.left {
float:left;
width:375px;
}

div.right {
float:right;
width:375px;
}

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

hr {
display:block;
visibility:hidden;
clear:both;
}

That's the basics - you may have to mess with margins and paddings and such, but for the most part, that should do it for ya.

[Moby_Dim]

Btw - it is not clear whether burntToast wants to use different size images or not. If the former, the doodlebee solution is not "table equal" : comments wount not be in a "column".

What if :

.container {width : 160px; height : 100px; text-align : right; float : left;}/*width and height actual values are due to the author*/
.new_row {clear : both;}
img {float : left}
...
<div>
<div class="container"><img src="..." width="90" height="70" alt="" border="0"> Image 1</div>
<div class="container"><img src="..." width="70" height="40" alt="" border="0"> Image 2</div>
<br class="new_row">
<div class="container"><img src="..." width="60" height="20" alt="" border="0"> Image 3</div>
<div class="container"><img src="..." width="70" height="70" alt="" border="0"> Image 4</div>
</div>
...

Here we have more "like table" appearance imho.

[doodlebee]

Btw - it is not clear whether burntToast wants to use different size images or not. If the former, the doodlebee solution is not "table equal" : comments wount not be in a "column".

Why not? The only different between yours and mine is that I didn't specify a height for the .left and .right div's. But the <hr>tag would clear both floating cells, causing the next row to appear vertically aligned at the top. The width of the cells would be the same: 375 pixels.

Am I missing something (aside from the height - 'cause otherwise mine looks a lot like yours!)?

[burntToast]

thanks for the help, exactly what I was looking for! :)

[HarryM]

Yes you can solve this problem using floating divs, but why do it?

It will break in certain browsers and floats can crash IE4, so you may want to provide an alternative layout method for older browsers - which is a lot of hassle.

Also you are laying out the images and text in a tabular manner which is exactly what tables are designed to do, and all browsers understand tables.

I'm not suggesting that floated divs should be totally avoided. My pages are all layed with divs, but I feel quite happy about putting a table within a div when appropriate.

[burntToast]

That is an interesting point you are making there HarryM. I also feel that tables would be appropriate in a situaton like this and also cause less markup in my case. In certain cases clients can argue that they want sites laid out with divs and images in tables is not OK with them. What are the arguments I can counter with in cases like that?

[doodlebee]

Harry is right - I mean if it *is* tabular data (like if this is some kind of shopping cart or something?) then a table would be fine.

In the few times where I've actually had a client question this, I basically explained that tables *are* for tabular data - and if that's what it is, then that's what you should use.

The only reason (well, it's not the *only* reason, but it's the first one that pops to mind!) for using divs in a tables place is for accessibility. If someone comes along with a screen reader, the reader will go through the table line by line. If you can read the table contents in the code uch like you would read a book, then a table would be fine.

(However, Harry! IE4?!? Really? Wow. I get people looking at me weird because my "lowest standard" is IE5! IE4 is barely even used anymore!)

[Moby_Dim]

doodlebee, may be you are right.

As for table vs. div... hmm... Due to current trends, tables are appropriate when we have data which have to be in a table in any case and any representation (hard copy, etc.) - can not be more clear, sorry - my English is not perfect.

And ie4 :) Nope. And what about NS 4.7? ;) We do not have to get gray or bold because of tooooooo lazy people who still have these ancient versions imho ;))

[HarryM]

This is getting off-topic, but there is a case for table layouts, and I must admit I have been tempted to go back to them. If you are using a server-side template system they are no more difficult to maintain than a div layout, and they avoid all browser compatability problems.

Div layouts are great for the typical 3-column layout used in English language sites. But if the site is in Chinese or Korean, etc., it's possible to go to 4 or 5-column layouts because the text wraps so neatly. Most Asian sites I have seen use table layouts, and quite a number have more than 3 columns - they would be extremely difficult to duplicate with divs.

As for IE4 and NS4, unfortunately I still see them in my logs. :(

[NonEuclidean]

Sorry to carry this further off topic, but I still see Mosaic in my logs, but does that mean I should scrap css & only use html 3.2? I wish there were a way to get the World to continually update & use the most modern standards compliant browsers, esp. since everyone should be able to access all the web can offer, but where does the line get drawn?