css - ejemplos - innerhtml jquery

¿Cómo presiono un flotador derecho, si su HTML está después del contenido?

Question

Tengo un diseño en su mayoría fijo de 2 columnas:

• 1.ª columna que ocupa tanto espacio como necesita
• y la segunda columna que tiene un ancho fijo y está flotando hacia la derecha

Quiero que sea un diseño receptivo, por lo que en los tamaños de pantalla más pequeños, la segunda columna termina debajo de la primera columna. Esto significa que el HTML para la 2da columna debe estar después de la 1ra columna.

Mi problema es que parece que no puedo flotar correctamente en la columna derecha cuando uso ese margen. Termina flotando, pero está por debajo del contenido principal.

Aquí hay un código de muestra:

HTML:

<div class=''content''>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class=''sidebar''>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>

CSS:

.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    float: right;
    width: 120px;
    background-color: lightgreen;
}

JS violín aquí: http://jsfiddle.net/zinkkrysty/U3fA8/

Intenté también usar márgenes negativos, pero parece que no puedo hacerlo.

Si tiene algún otro acercamiento a mi problema (excepto establecer un ancho en la primera columna), por favor pruébelo

Answer 1

Deje que el primer div tenga una position:absolute; y con la left:0px; y el right deseado puede tener un div flotante derecho fijo con un div flotante izquierdo dinámico.

MANIFESTACIÓN

HTML

<div id="parentDiv">
    <div id="leftDiv">
    </div>
    <div id="rightDiv">
    </div>
</div>

CSS

#parentDiv
{
    position:relative;
    overflow:hidden;
}
#leftDiv
{
    position:absolute;
    left:0px;
    top:0px;
    right:200px; //Increase it if you want a little space between the 2 divs.
    min-height:200px; // or bottom:0px; if you want a dynamic height
}
#rightDiv
{
    width:200px;
    float:right;
    min-height:200px;
}

MANIFESTACIÓN

Answer 2

Mirando tu violín, SOLO AGREGAR margin-top: -60px; en su .sidebar css y se moverá hacia arriba. Tu css se verá así:

.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    float: right;
    width: 120px;
    margin-top:-60px;
    background-color: lightgreen;
}

Answer 3

Póngalos en un elemento primario y establezca la posición de la barra lateral como absoluta, luego use un conjunto diferente de estilos para la pantalla sensible

html

<div class="parent">
    <div class=''content''>
        sdaohdosahdaf
        <br />adfafhaskldjs sgdafadkfjas
        <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad
    </div>
    <div class=''sidebar''>
        daobf haohf asod agsdjfa
        <br />sidja ofhad
        <br />sojgh fadpfjas
    </div>
</div>

css

.parent {
    position: relative;
}
.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 120px;
    background-color: lightgreen;
}
/* Responsive bit */
@media only screen and (max-width: 320px) {
    .content {
        background-color: orange;
        margin-right: 0px;
    }
    .sidebar {
        background-color: red;
        position: relative;
        width: 100%;
    }
}

Ejemplo

Answer 4

Prueba a continuación ... te ayudará ...

.content {
    background-color: lightblue;
    float: left;
}
.sidebar {
    float: left;
    width: 120px;
    background-color: lightgreen;
}

Creo que necesitabas esto ... Prueba el Fiddle actualizado: http://jsfiddle.net/U3fA8/1/

Answer 5

Prueba los márgenes negativos en%

Ej. Margen superior: -10%;

Answer 6

La solución más simple sería intercambiar su contenido y div de barra lateral.

En lugar de

<div class=''content''>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class=''sidebar''>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>

Tú lo haces:

<div class=''sidebar''>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>
<div class=''content''>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>

Tu css permanece igual. Así es como se ve, exactamente lo que estás buscando :)

http://jsfiddle.net/j1wu/vg08f4ep/

Answer 7

Basándome en la noción de @ 9205892 de que necesita otro div envoltorio, he descubierto que evita usar el posicionamiento absoluto (que puede crear problemas con cualquier contenido después de las dos columnas), y aún así obtener un diseño receptivo. Simplemente configure las dos secciones para "flotar" y especifique sus anchuras (Acabo de darles porcentajes). Luego, en la sección responsiva @media , establece el ancho de cada sección al 100% y el navegador las colocará una detrás de la otra.

HTML

<div class="parent">
  <div class=''content''>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad
  </div>
  <div class=''sidebar''>
    daobf haohf asod agsdjfa
    <br />sidja ofhad
    <br />sojgh fadpfjas
  </div>
</div>

CSS

.parent {
  position: relative;
}

.content {
    background-color: lightblue;
    width: 60%;
    float: left;
}
.sidebar {
    top: 0px;
    right: 0px;
    width: 40%; /* 100% - .content.width */
    float: left;
    background-color: lightgreen;
}

/* Responsive bit*/
@media only screen and (max-width: 320px) {
  .content {
    background-color: orange;
    width: 100%; /* Leave no room for sidebar */
  }
   .sidebar {
    background-color: red;
    width: 100%; /* Sidebar is puffed up */
  }
}

Demostración (basada en las demostraciones de las otras respuestas)