I am dynamically generating web pages. These web pages have groups of images that I want to put in a particualar format (i.e., a group of 4 or five images side-by-side.)
So think of these groups as “words”. When I reach the end of a browser window, I want the groups of images to “word wrap”, that is, continue on the next line, but not break up any single group of images. Clear? Now, I’ve tried using <pre> and <table>, but when two consecutive <pre> or <tables> are used (in IE), it puts the second below the first. I want to conserve space and put as many groups on one line as possible.
What you want to do is explictly tell the browser were it can break lines. Do not put any extra spaces or break lines in your HTML where you don’t want them to happen, that is, each tag must be butted right up next to the next tag. That said, do this to make groups of three
<img>&nsbp;<img> <img> <img>&nsbp;<img> <img>
The &nsbp; is a “non breaking space”, the browser is not susposed to wrap based on those spaces. The only place the browser can wrap is at the space (or you could put two two sets on different lines, because the end of line is equal to a space) in between to two sets.
Note that the ampersand and semicolon are important.
If the images can fit six across, with the above example, then it shouldn’t break up, but if it can’t fit six, then it should two rows of three.
Other than that, you could try nested tables, but remember that if you nest tables, closing </TR> tags and </TD> tags are required for all rows and datas.
(if any admins are reading this, the tags randomly disappear in my editing body when I preview … this may be a limit of my browser though).
Right, but since I don’t know where to break the rows–because that would be based on the user’s screen width, I wouldn’t be able to tell where to insert the <TR> tags.