Veran, estoy empezando en el mundillo del diseño web de manera autodidacta y estoy haciendo un trabajo que solo requiere de html5 + css3 + javascript y tengo bastantes dificultades (al menos para mi).

Necesitaria saber como poder estilizar los placeholders para que queden como en la foto, organizar los divs para que queden asi como en la foto y que en activados y seleccionados queden parecidos a la foto de abajo

http://prntscr.com/7snowz

http://prntscr.com/7snp9n

os agradeceria muchisimo la ayuda porque yo la verdad es que ando muy perdido, no hay manera de cambiar el estilo de los placeholders, no tengo ni idea de como colocar esos separadores grises entre los divs y que queden tan cuadriculados.

estoy usando el sistema de grids de 1140px

socorro

Si la propiedad hover me la conozco, queria saber como dejar los dos placeholders pegados uno con otro y luego el tema de colocar los divs tan alineados con esa separacion gris entre ellos

Asi es como lo tengo ahora mismo:

http://prntscr.com/7srb38

y asi es como quiero que se vea:

http://prntscr.com/7snowz

este es el html;

  <div class="container12" id="menu">
        <div class="row">
            <div class="column2" id="logo"><img src="img/logo.png" alt=""></div><!-- Logo-->
            <div class="column2" id="tlf"><p>8 800 77 66 44</p></div><!-- tlf-->
            <div class="column6"><input type="search" placeholder="Busca tu Archivo" id="Buscador" /></div><!-- buscar-->
            <div class="column2" id="pago"><p>&#1054;&#1055;&#1051;&#1040;&#1058;&#1040; &#1048; &#1044;&#1054;&#1057;&#1058;&#1040;&#1042;&#1050;&#1040;</p></div><!-- pago-->
        </div><!-- row-->
 
        <div class="row2" class="nav">
            <div class="column10" id="nav">
                <nav>
                    <ul>
                        <li><a href="#smartphone">&#1052;&#1054;&#1041;&#1048;&#1051;&#1068;&#1053;&#1067;&#1045; &#1058;&#1045;&#1051;&#1045;&#1060;&#1054;&#1053;&#1067;</a></li>
                        <li><a href="#tablet">&#1055;&#1051;&#1040;&#1053;&#1064;&#1045;&#1058;&#1067;</a></li>
                        <li><a href="#photo">&#1060;&#1054;&#1058;&#1054;&#1058;&#1045;&#1061;&#1053;&#1048;&#1050;&#1040;</a></li>
                        <li><a href="#notebooks">&#1053;&#1054;&#1059;&#1058;&#1041;&#1059;&#1050;&#1048;</a></li>
                        <li><a href="#tv">&#1058;&#1045;&#1051;&#1045;&#1042;&#1048;&#1047;&#1054;&#1056;&#1067;</a></li>
                    </ul>
                </nav>
            </div>
            <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR</a></div>
        </div>    
    </div><!-- container-->
    <!-- END MENU NAVIGATION-->
 
    <!-- DROP DOWN MENU -->
        <div class="container16">
            <div class="row" class="column16">
                <ul class="menu">
                    <li><a href="#">&#1051;&#1070;&#1041;&#1054;&#1043;&#1054; &#1058;&#1048;&#1055;&#1040;<img src="img/drop_dark.png" id="tipo" alt=""></a>
                        <ul>
                            <li><a href="#compacta">&#1050;&#1054;&#1052;&#1055;&#1040;&#1050;&#1058;-&#1050;&#1040;&#1052;&#1045;&#1056;&#1040;</a></li>
                            <li><a href="#sinEspejo">&#1041;&#1045;&#1047;&#1047;&#1045;&#1056;&#1050;&#1040;&#1051;&#1068;&#1053;&#1040;&#1071;</a></li>
                            <li><a href="#espejo">&#1047;&#1045;&#1056;&#1050;&#1040;&#1051;&#1068;&#1053;&#1040;&#1071;</a></li>
                            <li><a href="#medioFormato">&#1057;&#1056;&#1045;&#1044;&#1053;&#1045;&#1060;&#1054;&#1056;&#1052;&#1040;&#1058;&#1053;&#1040;&#1071;</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="menu">
                    <li><a href="#marca">&#1051;&#1070;&#1041;&#1054;&#1043;&#1054; &#1041;&#1056;&#1045;&#1053;&#1044;&#1040;<img src="img/drop_dark.png" alt=""></a>
                        <ul>
                            <li><a href="#canon">CANON</a></li>
                            <li><a href="#nikon">NIKON</a></li>
                            <li><a href="#sony">SONY</a></li>
                            <li><a href="#fujifilm">FUJIFILM</a></li>
                            <li><a href="#samsung">SAMSUNG</a></li>
                            <li><a href="#olympus">OLYMPUS</a></li>
                            <li><a href="#panasonic">PANASONIC</a></li>
                            <li><a href="#polaroid">POLAROID</a></li>
                        </ul>
                    </li>
                </ul>
                <div id="precios" class="column10">
                    <form> 
                        &#1055;&#1054; &#1062;&#1045;&#1053;&#1045;
                        <input type="text" name="min" placeholder="&#1054;&#1058;">
                        <input type="text" name="max" placeholder="&#1044;&#1054;">
                        &#1056;&#1059;&#1041;&#1051;&#1045;&#1049;
                    </form>
                </div>
            </div>
        </div>
    <!-- END DROPDOWN MENU-->
 
        <div class="container16">    
            <div class="column6" id="discounted">
                <div>
                    <img src="img/xe22.jpg" id="xe22" alt="">
                </div>
                <div>
                    <p>
                        <strong>Fujifilm X-E2 Kit 18-55mm</strong>
                            &#1041;&#1077;&#1079;&#1079;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103; 16.3 &#1052;&#1087; 1.5crop.
                            C &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F2.8-4.0 18-55mm
                            &#1069;&#1082;&#1088;&#1072;&#1085; 3” 1 040 000 &#1087;&#1080;&#1082;&#1089;.
                            &#1069;&#1083;&#1077;&#1082;&#1090;&#1088;&#1086;&#1085;&#1085;&#1099;&#1081; &#1074;&#1080;&#1076;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100;
                            &#1052;&#1077;&#1090;&#1072;&#1083;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081; &#1082;&#1086;&#1088;&#1087;&#1091;&#1089;
                            Live View &#1089; &#1072;&#1074;&#1090;&#1086;&#1092;&#1086;&#1082;&#1091;&#1089;&#1086;&#1084;
                            ISO 200-2500
                            &#1057;&#1100;&#1077;&#1084;&#1082;&#1072; Full HD &#1074;&#1080;&#1076;&#1077;&#1086; 60 &#1082;&#1072;&#1076;&#1088;&#1086;&#1074;/&#1089;&#1077;&#1082;
                            &#1055;&#1086;&#1076;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072; &#1082;&#1072;&#1088;&#1090; SD, SDHC, SDXC
                            WiFi
                        <strong><del> 14 850 000</del></strong>
                        <hr>
                        <strong> 8 355 000</strong>
                    </p>
                </div>
            </div>
 
            <div class="column4">
                <img src="img/700d.jpg" alt="">
                <p>
                    <strong>Canon EOS 700D Kit 18-55 IS STM</strong>
                    &#1047;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103;, 18 &#1052;&#1087; 1.6 crop.
                    &#1057; &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F3.5-5.6 18-55mm
                    &#1069;&#1082;&#1088;&#1072;&#1085; 3” &#1089;&#1077;&#1085;&#1089;&#1086;&#1088;&#1085;&#1099;&#1081;, &#1087;&#1086;&#1074;&#1086;&#1088;&#1086;&#1090;&#1085;&#1099;&#1081;,
                    &#1042;&#1080;&#1076;&#1077;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100; &#1086;&#1087;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081;
                    <hr>
                    <strong> 8 355 000</strong>
 
                </p>
            </div>
 
            <div class="column4">
                <img src="img/x100s.jpg" alt="">
                <p>
                    <strong>Fujifilm X100S</strong>
                    &#1050;&#1086;&#1084;&#1087;&#1072;&#1082;&#1090;-&#1082;&#1072;&#1084;&#1077;&#1088;&#1072;, 16.3&#1052;&#1087; 1.5 crop, F2.0
                    35&#1084;&#1084;, &#1101;&#1082;&#1088;&#1072;&#1085; 2.8”
                    <hr>
                    <strong> 12 999 000</strong>
                </p>
            </div>
        </div>
 
        <div class="container16">
            <div class="row2">
                <div class="column4">
                    <img src="img/d3200.jpg" alt="">
                    <p>
                        <strong>Nikon D3200 Kit 55mm VR</strong>
                        &#1047;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103;, 24.2 &#1052;&#1087; 1.5 crop,
                        &#1057; &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F3.5-5.6 18-55&#1084;&#1084;,
                        &#1069;&#1082;&#1088;&#1072;&#1085; 3”, &#1074;&#1080;&#1076;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100; &#1086;&#1087;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081;
                        <hr>
                        <strong> 5 967 000</strong>
                    </p>
                </div>
 
                <div class="column4">
                    <img src="img/a5000.jpg" alt="">
                    <p>
                        <strong>Sony Alpha a5000 Kit 16-50mm</strong>
                        &#1041;&#1077;&#1079;&#1079;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103;, 20.1 &#1052;&#1087; 1.5 crop,
                        &#1057; &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F3.5-5.6 16-50&#1084;&#1084;,
                        &#1069;&#1082;&#1088;&#1072;&#1085; 3” &#1087;&#1086;&#1074;&#1086;&#1088;&#1086;&#1090;&#1085;&#1099;&#1081;, WIFI
                        <hr>
                        <strong> 6 900 000</strong>
                    </p>
                </div>
 
                <div class="column4">
                    <img src="img/1200d.jpg" alt="">
                    <p>
                        <strong>Canon EOS 1200D Kit 18-55mm IS II</strong>
                        &#1047;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103;, 18 &#1052;&#1087; 1.6 crop,
                        &#1057; &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F3.5-5.6 18-55&#1084;&#1084;,
                        &#1069;&#1082;&#1088;&#1072;&#1085; 3”, &#1074;&#1080;&#1076;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100; &#1086;&#1087;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081;
                        <hr>
                        <strong> 5 967 000</strong>
                    </p>
                </div>
            </div>
            <div class="row2">
                <div class="column4">
                    <img src="img/g7x.jpg" alt="">
                    <p>
                        <strong>Canon PowerShot G7 X</strong>
                        &#1050;&#1086;&#1084;&#1087;&#1072;&#1082;&#1090;-&#1082;&#1072;&#1084;&#1077;&#1088;&#1072;, 20.2 &#1052;&#1087; 1”, F1.8-2.8
                        24-100 &#1084;&#1084; 4X, &#1101;&#1082;&#1088;&#1072;&#1085; 3”, &#1089;&#1077;&#1085;&#1089;&#1086;&#1088;&#1085;&#1099;&#1081;,
                        &#1074;&#1080;&#1076;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100; &#1086;&#1087;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081;, WiFi
                        <hr>
                        <strong> 8 499 000</strong>
                    </p>
                </div>
            </div>
        </div>
 

y este es el css;

* ==========================================================================
   Authors custom styles
   ========================================================================== */
body{
    font-family: 'robotomedium';
    font-size: 14px;
}
/* ==========================================================================
   MENU
   ========================================================================== */
#logo{
    padding-top: 10px;
}
 
 
#Buscador {
    background: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-19-32.png) no-repeat 0px 5px;
    background-size: 24px;
    width: 400px;
    border: transparent;
    border-bottom: solid 1px #fff;
    padding: 10px 10px 10px 30px;
    outline: none;
}
 
#pago, #tlf{
    padding-top: 15px;
}
 
#tlf{
    text-align: center;
}
 
#menu{
    background: #48F;
    padding-top: 0;
    padding-bottom: 0;
    color: #fff;
}
 
 
nav,
nav ul,
nav li,
nav a{
    margin: 0;
    padding: 0;
    border: none;
    outline: none; 
    color: #fff; 
}
 
.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
nav li{
    position: relative;
    padding: 10px 10px 10px 10px;
 
    float: left;
    list-style: none;
    text-align: center;
    display: block;
    height: 20px;
    border: 1px solid ;
}
 
nav li a{
    display: block;
    margin-bottom: 6px;
    text-decoration: none;
}
 
.menu ul{
    display: none;
}
 
.menu li {
    position: relative;
    padding-left: 10px;
    list-style: none;
    float: left;
    display: block;
    height: 30px;
}
 
.menu li a {
    display: block;
    padding-left: 10px;
    margin: 6px 0;
    line-height: 30px;
    text-decoration: none;
    border: 1px solid #393942;
}
 
.menu li a img{
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 5px;
}
 
.menu li a img[id|="tipo"]{
    padding-left: 60px;
}
 
a[id|="pagar"]{
    text-decoration: none;
    margin-left: 60px;
    font-family: 'robotomedium';
    color: #fff;
}
 
#carritoBlanco{
    padding-right: 10px;
}
 
 
 
#precios{
    height: 40px;
    padding-top: 6px;
}
 
form{
    position: relative;
    padding-left: 20px;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
 
input{
    text-align: left;
    padding: 5px 0;
 
}
 
::-moz-placeholder {
    border: 1px solid #393942;
    display: block;
    text-align: left;
    background-size: 40px;
}
 
#xe22{
    float: left;
}

utilizo el sistema de grids 1140px. Si me echaras un cable te lo agradeceria mucho.

Mod: los códigos deben ir en etiquetas GeSHi