Problema con los selectores

[luchi2]

Hola gente. tengo un problema que me está volviendo loco con los selectores de CSS . El caso esque necesito una tabla en la que el <thead> sea la comunidad autónoma con una imagen grande de la comunidad y un texto, debajo tendrán que ir las provincias en un <tr> formado por tres <td>, cada <td> será una provincia (también formadas por una imagen (más pequeña que la de la comunidad) y un texto, si hay más de tres provincias, se creará otro <tr>).
Esto es una forma de explicarlo ya que debido a lo mal que se llevan las tablas en html con el responsive no es mi intención crear una tabla convencional, así que lo he echo con divs, pero hay dos problemas:
1º No hay manera que se coloque de éste modo que explico.
2º El más acuciante: no funcionan correctamente los selectores. Sólo funciona el que está debajo, son un id de la comunidad, en éste caso "#andalucia" y la clase ".provincias". Éste problema va ligado al anterior, ya que aunque en el código que os muestro debajo en ".provincias" sólo hay un fondo verde, si coloco un "display: inline" o un "float: left" para que se coloque no funciona.
Puede que el problema venga de que no lo enfoco de modo adecuado, pero en cualquier caso, necesito un cable.
Os dejo el código:

Código HTML:

<div id="comunidades">
  <div id="andalucia">
        <ul>
          <li>
            Cursos Andalucía<br>
            <img src="images/comunidades/Andalucia.svg.png">
               </li>
                </ul>
                 <div class="provincias">
                   <img src="images/comunicacion/cursos_almeria_comunicacion.png" width="53" height="68" alt="Cursos comunicación Almería" title="Cursos comunicación Almería"><br>Cursos Almería
                      </div>
                        <div class="provincias">
                         <img src="images/comunicacion/cursos_cordoba_comunicacion.png" width="53" height="68" alt="Cursos comunicación Cordoba" title="Cursos comunicación Córdoba"><br>Cursos Córdoba  
                            </div>
                             </div>
                              </div>
 

Código CSS:

.provincias{
            background-color: green;
        }
        #andalucia{
        overflow: hidden;
   width: 150px;
   border: 1px solid #bbb;
   background: #ddd;
   padding: 10px;
        }
 

Cualquier ayuda será bienvenida.