autosize de uma div

[iniciante 0]

Boa tarde. Eu tou com um problema que n estou a perceber nem o porque e nem sei como resolver. Uma div (view4) que esta definida assim, num ficheiro css:

#view4{position:relative; float:left; height:auto; width:auto; border: 1px solid #BBB; }

e quero que dentro dessa div apareça tbm um texto e um FileUpdate, onde no seu ficheiro css defini as suas div assim:

   #view4titulo{position:relative; float:left; width:700px; top:10px}
   #carrega1{position:relative; float:left; width:500px; left:90px; top:40px}
  h1{margin: 0; padding:4; font-size:14pt; color:#FF8C00; font-family:Verdana; text-decoration: underline}

       

com isto, no html expus as div da seguinte maneira:

<div id="view4">
                    
                        <div id="view4titulo">
                                <h1>
                                     Carregamento multimédia 
                                </h1>
                        </div>
                       <div id="carrega1">
                            <asp:FileUpload ID="FileUpload1" runat="server" Width="500" size="70"/>
                            <asp:Label ID="Label1" runat="server" Text="Label" Font-Names="Verdana" 
                                ForeColor="Red" Visible="True"></asp:Label>
                        </div>
</div>

mas acontece que o border da div view 4 so esta a apanhar a div que contem o texto, ficando o FileUpdate fora do contorno da div..! alguem me sabe explicar o pq? =/

[yoda 135]

É o "problema" das divs. No máximo consegues altura dinâmica, largura não.

[brunoais 65]

É o "problema" das divs. No máximo consegues altura dinâmica, largura não.

Pois... Só se usares javascript. Com CSS acho q n vais lá...

[iniciante 0]

pois mas a largura n é problema..o que me preocupa é a altura! como é que eu faço pa ser dinamica? ou entao podem indicarme um exemplo com javascript?

[yoda 135]

Para a altura não é preciso javascript.

http://www.webtoolkit.info/css-clearfix.html

[Pedro Magalhães 0]

Hipótese 1:

Experimenta criar a classe:

.clear{clear:both}

E coloca:

<div class="clear"></div>

No final de

<div id="carrega1">
...
</div>

Hipótese 2:

Experimenta adicionar a propriedade overflow:auto à <div id="view4">

Boa sorte

[yoda 135]

Hipótese 1:

Experimenta criar a classe:

.clear{clear:both}

E coloca:

<div class="clear"></div>

No final de

<div id="carrega1">
...
</div>

Hipótese 2:

Experimenta adicionar a propriedade overflow:auto à <div id="view4">

Boa sorte

Ambas soluções antigas e sem nexo.

[Pedro Magalhães 0]

O problema do iniciante é que está a colocar position:relative em tudo.

O que faz com que o #view4 não ganhe dimensão.

É preferível aplicar margin aos elementos #view4titulo e #carrega1.

Assim não precisa de fazer nenhum clear:both ou clearfix, que só está a dificultar as coisas.

Ambas soluções antigas e sem nexo.

O clear:both limpa os floats desde o I6 até agora ao IE9.

É o truque mais utilizado para limpar floats. Até a homepage do sapo faz uso ao <div class="clear"></div> com .clear{clear:both}

Quanto ao overflow:auto vê uma possibilidade da sua aplicação em http://webdesignerwall.com/demo/clear-float

[iniciante 0]

isto resolveu http://snippets.dzone.com/posts/show/216 obrigado a todos