HTML CSS LISTS IN-LINE????

ScottieT

New Member
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>
 

LS

New Member
ul
{
display inline;
height 150px;
width 150px;
bordersolid 1px #000000;
positionrelative;
margin-left10px
}

ul li {display inline}

might work the ul need to be a little bit bigger than you contain block but wide enought to fit 320px across this will be you first 2 blocks then the next 2 will apear on the next line on there own.
 
Top