3 divs flutuantes com centro largura dinâmica

votos
3

Tudo bem que o meu problema é que eu não posso obter o div centro para definir dinamicamente a sua largura com base na largura do navegador e ainda flutuar entre as duas divs.

<style type=text/css>
#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;width:100%;float:left;}
#right{min-height:70px;width:60px;float:right;}
</style>
<div id=container>
    <div id=left>text</div>
    <div id=middle>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.</div>
    <div id=right>text</div>
</div>
Publicado 09/08/2011 em 15:58
fonte usuário
Em outras línguas...                            


5 respostas

votos
2

Você pode definir a largura da div meio usando jQuery , como tal:

$('#middle').width($('#container').width()-120);

Demonstração de trabalho

Respondeu 09/08/2011 em 16:03
fonte usuário

votos
8

Você pode tentar definir o seu CSS assim:

#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;padding:0 60px}
#right{min-height:70px;width:60px;float:right;}

jsFiddle

Respondeu 09/08/2011 em 16:05
fonte usuário

votos
1

Tente isto com algum javascript trivial: http://jsfiddle.net/maniator/SjMqU/

var middle = document.getElementById('middle');
var win_width = document.body.offsetWidth;
middle.style.width = (win_width - 140) + 'px';

E este violino funciona na janela de redimensionamento: http://jsfiddle.net/maniator/SjMqU/4/

Respondeu 09/08/2011 em 16:06
fonte usuário

votos
0

A melhor maneira de fazer isso seria a de colocá-lo em uma mesa, mas se você não quer que apenas fazer todos os divs se comportam como células da tabela:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Respondeu 09/08/2011 em 16:10
fonte usuário

votos
0

Você poderia fazer algo parecido com isto:

#container{width:100%;
}
#left, #middle, #right{min-height:70px; 
    display:inline-block;
    vertical-align:top;
}
#left{width:19%;
    background:red;
}
#middle{width:60%; 
    background:green;
}
#right{width:19%; 
    background:blue;
}

http://jsfiddle.net/jasongennaro/8BqP9/

Respondeu 09/08/2011 em 16:11
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more