Cambiar layout de menú

[JulioGomez]

Hola, soy novato y no sé mucho de CSS, y tengo un menú de operaciones en fila, y cada módulo se va agregando en una columna, así:
Y quiero poner cada casilla de esta forma:


Pero no tengo idea de cómo lo hago. Tengo este código en la página:

Código HTML:

<div class="art-sheet clearfix">
            <div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content"><article class="art-post art-article">
                                
                                                
                        <div class="art-postmetadataheader">
                                        <h2 class="art-postheader">Autenticación</h2>
                                    </div>
                        <img width="400" height="236" alt="" src="images/DSC_3049.jpg" style="float: left; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px;" class="">
 
        <div style="margin-left:60%;">
        <form  action="Controladores/autenticacion.php" method="post" >
 
            
           <label for="nick">NICK</label><br>
           <input id="nick" name="nick" type="Text" class="textos" style="width: 60%; border: 1.5px solid #A0A0A0; border-radius:4px; height:12px; " ><br><br>
           
           <label for="contrasena">CONTRASEÑA</label><br>
           <input id="contrasena" name="contrasena" type="password" style="width: 60%; border: 1.5px solid #A0A0A0; border-radius:4px; height:12px;" ><br><br>
 
 
           <input type="submit" href="#" class="art-button" value="Entrar"><br><br>
 
           <a href="reestablecer.php"> ¿Olvidaste tu contraseña? </a>
        </form>
        </div>
    </div>
    </div>
</div>
<div class="art-content-layout-br layout-item-0">
</div></div>
 

Y este es el código css de las clases que creo que están relacionadas ahí:

Código CSS:

.art-sheet
{
   margin:2px auto 0;
   position:relative;
   cursor:auto;
   width: 900px;
   z-index: auto !important;
}
 
.art-layout-wrapper
{
   position: relative;
   margin: 0 auto 0 auto;
   z-index: auto !important;
}
 
.art-content-layout
{
   display: table;
   width: 100%;
   table-layout: fixed;
}
 
.art-content-layout-row 
{
   display: table-row;
}
 
.art-layout-cell
{
   display: table-cell;
   vertical-align: top;
}
 

Cómo puedo cambiarlo a la forma que quiero? No estoy pidiendo que me hagan eso, pero sí que me digan como hacerlo, soy novato y no entiendo mucho de esto, así que necesito al menos una guía de cómo cambiar esa parte. Muchas gracias!

[pzin]

En realidad lo ideal sería encontrar una guía manual que te ayuda en cualquier cosa; librosweb.es suele estar bien si andas empezando.

El código no lo entiendo mucho, no corresponde con la imagen, ¿no? Por el código, para ver a qué corresponde cada cosa. Porque así tal cual, no se sabe si cada parte es así o cada parte va ahí.

Y usa highlight cuando publiques código.