[SOLUCIONADO] Problemas con el margin-top y la altura

[jc1992]

Estoy haciendo un template con Bootstrap3 y me encuentro con el siguiente problema de las alturas.

Tengo el siguiente código

Código HTML:

<div class='row fondo'>
                <div class="col-xs-12 navbar-fixed-top navbar margencero paddingcero">
                    <img src="img/prueba.png" class="img-responsive centrar" alt="prueba">
                </div>
                
        </div>
 

Vale? La clas img-responsive tiene el siguiente CSS

Código CSS:

un max-width:100% y un height:auto
 

Entonces el problema viene que el siguiente row quiero hacerle un margin-top y no se como hacer que se ponga justo cuando acabe la altura.

Alguna ayuda?

[Sarlit]

Utiliza flex, funciona en la inmensa mayoría de los navegadores (incluso móviles) y una vez lo pruebas se te olvidarán el resto de propiedades del CSS

[URL="http://www.w3schools.com/cssref/css3_pr_flex.asp"]http://www.w3schools.com/cssref/css3_pr_flex.asp[/URL]

[pzin]

¿Cuál es el problema? Lo que describes que quieres hacer es el comportamiento habitual de CSS, ¿no?

[jc1992]

Explicaré el problema lo mejor que pueda

Este es el resultado final :

Código HTML:

<div class="container-fluid">   
    <div class='row fondo' style="background-color:red;" >              
            <div class="col-xs-12"  >
                <form action="buscar.php" style="padding-top:185px;">
                    <div class='col-xs-12'>
                        <select class="form-control">
                          <option>Conferencia este</option>
                          <option>2option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                    </div>
                        <div class='col-xs-12'>
                    <select class="form-control">
                      <option>Conferencia Oeste</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="col-xs-12">
                    <button id="singleton" name="singlebutton" class="btn  center-block">Buscar</button>
                </div>
        
                </form>
            </div>
        </div>  
    </div>
 

Vale el padding-top afecta a la imagen de fuera , alguna idea ?

El css que afecta

Código CSS:

.fondo{
    background-color:yellow;
    background:url('../img/banner.jpg')  no-repeat;
    background-position:center;
    background-size:100%;
}
 

[jc1992]

Lo he solucionado con un display-inline y un problema del background :D