Hello all! Please can anybody help me? I have about 20 small tables on html-page (about 200px width and 350 px height). How I can place them on page one after another that they will not go out of screen and will not create horizontal scrollbar but will go to another row of page? So, I want that they (tables) will take place as images do - if I place several image tags one after another : <img src="..."> <img src="..."> <img src="..."> <img src="..."> <img src="..."> <img src="..."> Code (markup): if they meet right screen border they float to another row and if I change width of browser window they redraw and still dont create horizontal scroll bar. Thank you!
Set a fixed width for the <div> or pick one and enter a <br /> after an image tag. <img src="..."> <img src="..."> <img src="..."> <img src="..."> <br /> <img src="..."> <img src="..."> <img src="..."> <img src="...">
Thx Colbyt but I don't want images - I want tables and without <br>. I want that pages itself choose quantity of tables on each row depending of browser window width.
Tested in IE6/7, Firefox2/3, Safari/Win and Chrome, and Opera9.63. Do this: <!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 (vers 6 November 2007), see www.w3.org" /> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ table { border: 1px solid black; display: -moz-inline-box; /*required for FF2*/ display: inline-table; margin: 0 .25em 1em; vertical-align: top; /*IE, FF2, and Webkit default to bottom*/ } * html table { display: inline; } *+html table { display: inline; } td { border: 1px solid blue; } /*]]>*/ </style> </head> <body> <table summary=""> <caption>first table</caption> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </table> <table summary=""> <caption>second table</caption> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </table> <table summary=""> <caption>third table</caption> <tr> <td>col 1</td> <td>col 2 made wider than the others</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </table> <table summary=""> <caption>fourth table</caption> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3 is a little wider</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </table> <table summary=""> <caption>fifth table</caption> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </table> <table summary=""> <caption>sixth table</caption> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </table> </body> </html> Code (markup): See Inline-block Gallery for why we don't use float for this. cheers, gary