Is there a way to do an html list this way

Question

I am creating a drag and drop plan. I did my best to manipulate the list to look like this:

it looks like this:

How can i cancel it? I want the teacher to feel that he is just standing in front of the class. Is it possible? Thanks in advance!

styles.css

body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } ul { list-style-type:none; width:500px; } #contentLeft li { list-style: none; width: 78px; height: 78px; background-color:#2a70db; border: #CCCCCC solid 1px; color:#fff; float:right; margin: 3px 2px 0 0; padding: 5px 5px 5px 5px; } 

Answer 1

You can use the css selector. In your case, the 3rd element should be on a new line so that you can clear the floats with it.

The code will look like this:

 li:nth-child(3) { clear: both; }