He estado tratando de poner dos divs uno al lado del otro, pero no puedo encontrar una manera efectiva de hacerlo. Quiero establecer un menú de barra lateral junto a un artículo. Intenté hacer flotar uno a la izquierda, pero todo lo que hace es crear una gran brecha entre los dos. Este es mi codigo:

CSS

div#divone {
     float:left;
     margin-left: 10%;
     border: 2px outset white;
     padding; 10px 10px 10px 10px;
     font-family; Times New Roman;
}
div#divtwo {
     float:right;
     margin-left: .1%;
     border: 2px outset white;
     padding; 10px 10px 10px 10px;
     font-family; Times New Roman;
}

HTML

<div id="divone">
     <p>word</p>
</div>
<div id="divtwo">
     <p>word</p>
</div>
0
Scott Rose 5 feb. 2015 a las 01:23

4 respuestas

La mejor respuesta

Puede usar float:left en los divs para unirlos a ambos, y mientras lo hace, ¿por qué no poner los estilos comunes en un solo lugar, para hacer que su CSS sea un poco más 'limpio'?

div.floated {
  float: left;
  border: 2px outset white;
  padding: 10px 10px 10px 10px;
  font-family: Times New Roman;
}

div#divone {
  margin-left: 10%;
}

div#divtwo {
  margin-left: .1%;
}
<body>
  <div class="floated" id="divone">
    <p>word</p>
  </div>
  <div class="floated" id="divtwo">
    <p>word</p>
  </div>
</body>

Aquí hay un jsfiddle para representarlo si quieres jugar con el código: http://jsfiddle.net/ya3L75xd/

0
msturdy 4 feb. 2015 a las 22:34

Flotador izquierdo; para ambos <div> y están uno al lado del otro.

0
cli 5 feb. 2015 a las 14:48

Deberías poner #divTwo { float:left }

0
DokiCRO 4 feb. 2015 a las 22:27