html div vertical alignment

Question

Can anyone please help me in aligning this divs vertically i want secondDiv to come below firstDiv. i saw many posts but not able to resolve it can anyone change my code to work it.

<div>
    <div style="position:relative;width:800px;margin:0;padding:0">
        <div id="firstDiv" style="text-align:center;position:absolute;margin-top:0">
            <div>
                <span>
                    <input type="submit" title="" value="Select Photos From Your Computer"
                    name="sendBtn">
                </span>
            </div>
            <div style="width:492px;height:20px;position:absolute;top:8px;overflow:hidden;z-index:100">
                <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
                    <input type="file" style="opacity:0;font-size:20px;" accept="image/*"
                    name="d" id="d">
                </form>
            </div>
        </div>
        <div id="secondDiv" style="text-align:center;margin:3px 0 12px;">
            <span>You can add upto</span>
            <span style="font-weight:bold">3 Photos</span>
        </div>
    </div>
</div>

Peter · Answer 1 · 2012-04-18T10:23:04.233

Remove the "position:absolute" from firstDiv's style attribute, and it seems to answer your question.

This also results in things moving around. So you need to describe exactly what you want.

You should avoid using position:absolute and position:fixed unless you are doing something fancy (eg. a menu bar, or a window popup within a window). So remove all "position:..." stuff as well as "top:...".

And why do you have that opacity 0 file input in the middle? If you want it to hide and also remove the empty space, change that to "display: none" (and to unhide: "display: block" (like a div) or "display: inline" (like a span))

Here it is with the opacity changed to display, and all positioning stuff (top:, position:, etc.) removed.

<html>
<head>
<style>
</style>
</head>
<body>
    <div>
        <div style="width: 800px; margin: 0px; padding: 0px">   
            <div id="firstDiv" style="text-align: center; margin-top: 0">
                <div>
                    <span>
                        <input type="submit" title="" value="Select Photos From Your Computer" name="sendBtn" />
                    </span>
                </div>
                <div style="width:492px; height:20px; overflow:hidden; z-index:100">
                    <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
                        <input type="file" style="display: none; font-size:20px;" accept="image/*" name="d" id="d" />
                    </form>
                </div>
            </div>
            <div id="secondDiv" style="text-align: center; margin: 3px 0 12px;">
                You can add up to
                <span style="font-weight:bold">3 Photos</span>
            </div>   
        </div>
    </div>
</body>
</html>

After reading your comments on other's answers, try this: http://www.quirksmode.org/dom/inputfile.html http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file

score 0 · Answer 2 · answered Apr 18 '12 at 09:58

0

If you remove position: absolute; from the firstDiv it will work ... see here for an example

answered Apr 18 '12 at 09:58

Manse

37,765
10
83
108

Ya that works but you can see in my first div i am absoluting button and file input so that the user believes that they are clicking the button. I need this functionality is there anyway without removing absolute. – saravanan shanmugavel Apr 18 '12 at 10:03
@saravananshanmugavel I really dont understand what you are trying to do ... perhaps update your question with the problem you face - rather than asking a question about positioning – Manse Apr 18 '12 at 10:07
Sorry yar got it after removed that position it worked thanks – saravanan shanmugavel Apr 18 '12 at 10:23

score 0 · Answer 3 · answered Apr 18 '12 at 09:58

0

remove position:absolute; for firstdiv

answered Apr 18 '12 at 09:58

AliRıza Adıyahşi

15,658
24
115
197

score 0 · Answer 4 · answered Apr 18 '12 at 10:00

0

changed in div like

>  <div id="firstDiv" style="text-align:center;margin-top:0;">

and you will get like this output

enter image description here

answered Apr 18 '12 at 10:00

Ghost Answer

1,458
1
17
41

html div vertical alignment

4 Answers4