ubicacion de div

[Montes28]

hola amigos del foro espero me puedan ayudar

me encuentro trabajando Uni-Form http://sprawsm.com/uni-form/

y necesito colocar dos columnas y en cada columna debe contener input,select,etc

ya tengo la primera columna el problema qu tengo es para ubicar la segunda columna

<style type="text/css">
#columna1{ width:50%;
display:inline-block;
height:50%;
background-color:blue;
overflow:hidden;

}
#columna2{
width:50%;
display:inline-block;
height:50%;
background-color:green;
overflow:hidden;
}

</style>



este es mi formulario

Código HTML:

<form action="#" class="uniForm" method="post">
      <div id="columna1">     
      <fieldset>
        <h3>Apreciacion Visual </h3>
        
        <div class="ctrlHolder">
          <label for=""><em></em> Asistente </label>
          <!--<input name="name" id="name" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput"/>-->
          <select name=""  id="" class="selectInput required">
            <option value="">Seleccione</option>
            <option value="1">AAA</option>
          </select>
           
          <p class="formHint"></p>
        </div>
              
        
      </fieldset>
      </div>
        <div id="columna2">
            <fieldset>
        <h3>Apreciacion Visual </h3>
        
        <div class="ctrlHolder">
          <label for=""><em></em> Asistente </label>
          <!--<input name="name" id="name" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput"/>-->
          <select name=""  id="" class="selectInput required">
            <option value="">Seleccione</option>
            <option value="1">AAA</option>
          </select>
           
          <p class="formHint"></p>
        </div>
              
        
      </fieldset>
 
      </div>
      
      <div class="buttonHolder">
        
        <button type="submit" class="primaryAction">Submit</button>
      </div>
 
    </form>
 

[mariogl84]

Usa float:left en las dos columnas.

Un consejillo con el CSS, cambia tu código a esto:

Código:

.columna {
    width:50%;
    display:inline-block;
    height:50%;
    overflow:hidden;
    float:left;
}
#columna1{ 
    background-color:blue;
}
#columna2{
    background-color:green;
}

Y añádele la clase "columna" a los dos divs. De este modo tienes menos código y es más mantenible. Si dos elementos pertenecen a la misma categoría ("columna") y tienen todos los estilos iguales menos uno, es mejor organizarlo así.

[Montes28]

mariogl84 gracias por responder

me sive mucho tu codigo pero necesito que haya un espacio pequeño entre los divs

estuve intentando , tengo el espacio pero quedan mal los divs

como puedo hacerlo

mira mi codigo

Código CSS:

.uniForm .columna1{width:50%; display:inline-block; margin:auto; height:50%;   overflow:hidden;}
 

Código CSS:

<form action="#" class="uniForm" method="post">
<div class="ctrlHolder columna1">
          <label for=""><em></em> Fecha </label>
          <!--<input name="name" id="name" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput"/>-->
          <select name=""  id="" class="selectInput required">
            <option value="">Seleccione</option>
            <option value="1">AAA</option>
          </select>
           
          <p class="formHint">Fecha de la Apreciacion</p>
        </div>
 
 
        <div class="ctrlHolder columna1">
          <label for=""><em>*</em> Hora </label>
          <input name="a_number" id="a_number" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput required validateInteger validateMin val-10 validateMax val-50"/>
          <p class="formHint">Hora de la Apreciacion</p>
        </div>
    </form>
 

[mariogl84]

¿Pero no los querías uno al lado del otro? En este último código siguen estando uno debajo de otro.

Si lo que quieres es que estén uno al lado del otro, y que haya un espacio entre ambos, tendrás que flotarlos a la izquierda y darle un margin-right al primer div. Fíjate que, como estás usando porcentajes, te tienes que asegurar de que el ancho del primer div + el margen + el ancho del segundo div den un total de 100%. Por ejemplo:

Código:

.columna {
    [...tus estilos...]
    float:left;
    width:49.5%;
}
.columna:first-child {
    margin-right:1%;
}

[CapFarrl]

Iniciado por Montes28

mariogl84 gracias por responder

me sive mucho tu codigo pero necesito que haya un espacio pequeño entre los divs

estuve intentando , tengo el espacio pero quedan mal los divs

como puedo hacerlo

mira mi codigo

Código CSS:

.uniForm .columna1{width:50%; display:inline-block; margin:auto; height:50%;   overflow:hidden;}
 

Código CSS:

<form action="#" class="uniForm" method="post">
<div class="ctrlHolder columna1">
          <label for=""><em></em> Fecha </label>
          <!--<input name="name" id="name" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput"/>-->
          <select name=""  id="" class="selectInput required">
            <option value="">Seleccione</option>
            <option value="1">AAA</option>
          </select>
           
          <p class="formHint">Fecha de la Apreciacion</p>
        </div>
 
 
        <div class="ctrlHolder columna1">
          <label for=""><em>*</em> Hora </label>
          <input name="a_number" id="a_number" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput required validateInteger validateMin val-10 validateMax val-50"/>
          <p class="formHint">Hora de la Apreciacion</p>
        </div>
    </form>
 

puedes usar, margin-left:10px;