Relative Position

Question

I have a div that expands as the user add images on it. And under the div I have a button. I need this button to go down as the div expands down. The button position depends on the div position.

I want that the divUpload goes down as the user add photos to the panel: files.

HTML:

<form id="form1" runat="server" enctype="multipart/form-data">
    <div id="divListFiles">
        <asp:FileUpload ID="files" name="files[]" accept='image/*' runat="server" multiple />
        <asp:Panel ID="list" name="list" runat="server" Height="107px">
        </asp:Panel>
    </div>
    <div id="divListDel">
        <output id="listdel" name="listdel"></output>
    </div>
    <div id="divCarregando">
        <img id="carregando" src="http://bps.saude.gov.br/visao/img/carregando.gif" alt="Carregando..">
    </div>
    <div id="divNumImages">
        <asp:TextBox ID="txbNumImages" runat="server"></asp:TextBox>
    </div>
    <div id="divUpload">
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClientClick="ShowCarregando()" OnClick="btnUpload_Click" />
    </div>

CSS:

divListFiles {
    position:absolute;
    left:9px;
    top:99px;
    width:653px;
    height:105px;
    z-index:1;
}

#divListDel {
    position:absolute;
    left:81px;
    top:73px;
    width:627px;
    height:33px;
    z-index:1;
    text-align: left;
}

#divCarregando {
    position:absolute;
    left:7px;
    top:113px;
    width:423px;
    height:231px;
    z-index:-1;
    text-align: left;
}

#divNumImages {
    position:absolute;
    left:9px;
    top:100px;
    width:123px;
    height:27px;
    z-index:5;
    text-align: left;
}

#divUpload {
    position:relative;
    left:19px;
    top:241px;
    width:65px;
    height:27px;
    z-index:1;
    text-align: left;
}

#form1{
    height: 303px;
}

#carregando{
    visibility:hidden;
}

.thumb {
    height:65px;
    width:90px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
}

.thumbdel {
    height: 17px;
    width: 17px;
    margin: 60px 81px 0 0;
}

Answer 1

What you've described would be the normal behavior for:

<div><!-- ...the images here ... --></div>
<button>The Button</button>

...as by default a div is as wide as it can be and as tall as it needs to be, with content following it being rendered underneath.

Live Example | Source

Answer 2

HTML

<div class="wrap">
<div class="innner">nfdj</div>
<button>Click</button>
</div>

CSS

.wrap{
    width:250px;
    background:green;
    height:auto;
}
div{
    width:100%;
    height:150px;
    background:grey
}

DEMO

Answer 3

Whenever I wonder about CSS I go and visit Peter-Paul Koch -

http://www.quirksmode.org/css/display.html

but if you don't want to discover that site, then in most cases I would use display: block; for the button, which will ensure that it below the one above it.

If I had a set of buttons arranged horizontally I would enclose them all inside a div which was display: block; and make each button display: inline; . That way the entire group gets pushed below the div above, but each button is inline inside the div.

I'll leave you to work out what to do with a vertical set of buttons to one side or the other of the main div.

Answer 4

The problem is these lines in your CSS:

#divCarregando {
    position:absolute;

"Absolutely positioned boxes are taken out of the normal flow" , which creates (in my opinion) absolute MAYHEM on your page.

My #1 recommendation would be to use a nicely flowed HTML document without resorting to absolute positioning.

If you can't or won't do that, your only option will be to recalculate the bottom position of the image container and apply it to the top of the button container.

Using jQuery (for ease of example, only, as this is certainly possible without it):

When you add an image:

var images = $( "#divCarregando" ),
    position = images.offset();

$( "#divUpload" ).css({
    "top": position.top + images.outerHeight( true )
});

For what it's worth, I highly recommend not using absolute .