How can i change my current CSS code to work right?<br />
<br />
I want the four blocks to run 2 across. then go down a line and run two more across in the current format. <br />
<br />
I know i could use tables, but i'm trying to do this with CSS! And using Lists!!!! Any help please.<br />
<br />
Here's my code so far<html><head><style type="text/css"><br />
ul<br />
{<br />
display run-in;<br />
height 150px;<br />
width 150px;<br />
outline-style solid;<br />
outline-width thin;<br />
positionrelative;<br />
left 10px;<br />
}<br />
<br />
li {display inline}<br />
</style></head><body><ul><li><img width="100" height="100" src="image.jpg"><br /><li>line 1</li><li>line 2</li></ul><ul><li><img width="100" height="100" src="image.jpg"><br /><li>line 1</li><li>line 2</li></ul><ul><li><img width="100" height="100" src="image.jpg"><br /><li>line 1</li><li>line 2</li></ul><ul><li><img width="100" height="100" src="image.jpg"><br /><li>line 1</li><li>line 2</li></ul></body></html>
<br />
I want the four blocks to run 2 across. then go down a line and run two more across in the current format. <br />
<br />
I know i could use tables, but i'm trying to do this with CSS! And using Lists!!!! Any help please.<br />
<br />
Here's my code so far<html><head><style type="text/css"><br />
ul<br />
{<br />
display run-in;<br />
height 150px;<br />
width 150px;<br />
outline-style solid;<br />
outline-width thin;<br />
positionrelative;<br />
left 10px;<br />
}<br />
<br />
li {display inline}<br />
</style></head><body><ul><li><img width="100" height="100" src="image.jpg"><br /><li>line 1</li><li>line 2</li></ul><ul><li><img width="100" height="100" src="image.jpg"><br /><li>line 1</li><li>line 2</li></ul><ul><li><img width="100" height="100" src="image.jpg"><br /><li>line 1</li><li>line 2</li></ul><ul><li><img width="100" height="100" src="image.jpg"><br /><li>line 1</li><li>line 2</li></ul></body></html>