mdmartiny Posted March 9, 2017 Share Posted March 9, 2017 I have a script that creates numerous dynamic divs based on the information that it gets from the database. One of these divs I would like to be the last div in no matter how many divs there are. I am not an expert in CSS in any way. I do not know what I am doing wrong with the code that I am using. The div I want at the bottom gets moved but it also gets covered up with the previous div contents. This is the CSS that I am using .compose-form{ margin-left: auto; margin-right: auto; border-radius: 5px; padding: 20px; width: 90%; border: 1px solid #000; background-color: white; margin-bottom: 20px; min-height: 500px; position: relative; } .reply-form { position: absolute; bottom: 0; margin-bottom: 10px; } .email { background: white; border: 1px solid black; min-height:600px; } .email-header { font-size: 20px; line-height: 40px; height: 30px; margin-left: 2px; margin-bottom: 2px; font-weight: 600; padding-bottom: 40px; border-bottom: 1px solid black; } .to { font-size: 15px; ; line-height: 30px; } .email-content { margin-left: 16px; padding-top: 1px; } .slidingDiv { position: relative; display: none; } [class='slidingDiv']:last-of-type { display: block; } This is my HTML/PHP file <div class="row"> <div class="col-md-12"> <div class="col-md-6"><span class="to"> <strong><?php echo $message['to']; ?></strong></span></div> <div class="col-md-6"><span class="to pull-right"> <a href="#" class="show_hide" rel="#slidingDiv_<?php echo $counter; ?>"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a> <?php echo date("m-d-Y", strtotime($message['sent']));?> (<?php echo getTimeSince($message['sent']).' ago'; ?>)</span> </div> </div> </div> <div class = "slidingDiv" id="slidingDiv_<?php echo $counter; ?>"> <div class="row"> <div class="col-md-12"> <div class="email-content"> <?php echo $message['body']; ?> </div> </div> </div> </div> <hr class="mail-controls-divider"> <?php if ($counter == 0) { ?> <div class="col-md-12 reply-form"> <form role="form" class="form-horizontal" action="<?php echo MAIL_URL; ?>/index.php?page=email&id=<?php echo $_GET['id']; ?>" method="post" enctype="multipart/form-data"> <div class="form-group"> <input type="hidden" name="from" value="<?php echo $user['id']; ?>"> <input type="hidden" name="for" value="<?php echo $message['sent_to']; ?>"> <input type="hidden" name="date" value="<?php echo date('Y/m/d h:i:s a', time()); ?>"> <input type="hidden" name="subject" value="<?php echo $message['subject']; ?>"> <input type="hidden" name="originalMessage" value="<?php echo $_GET['id']; ?>"> </div> <div class="form-group"> <div class="col-md-12"> <textarea class="form-control" name="inputBody" id="inputBody" rows="5"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input type="reset" class="btn btn-warning" name="clear" id="clear" value="Clear"> <input type="submit" class="btn btn-primary" name="sent" id="sent" value="send"> </div> </div> </form> </div> <?php } $counter++; } ?> I have even added a screenshot of what it looks like when it is rendered Quote Link to comment https://forums.phpfreaks.com/topic/303410-forcing-a-div-to-the-bottom-of-another-div/ Share on other sites More sharing options...
Psycho Posted March 9, 2017 Share Posted March 9, 2017 (edited) If you are having a problem with client-side code - please post client-side code. Without knowing what the output from the PHP code would be, it is difficult to replicate the issue and find a solution. Take the HTML source from a page where the problem exists and strip out everything that is not germane to the issue and post that. I tried to use the code above and replace dynamic content with values and my output looks very different from what you have posted. EDIT: I'm guessing you are using JQueryUI. The main element to output the content is nested in a div with the class 'slidingDiv' and your CSS has this for that class .slidingDiv { position: relative; display: none; } With that display: none; property the content doesn't get displayed. The JQueryUI is manipulating the CSS properties to display the content. So, it is impossible to know what the "real" properties are when viewed in the page from what you have provided. You could try creating a working JSFiddle page that displays the problem, then give us a link to that. Edited March 9, 2017 by Psycho Quote Link to comment https://forums.phpfreaks.com/topic/303410-forcing-a-div-to-the-bottom-of-another-div/#findComment-1543995 Share on other sites More sharing options...
mdmartiny Posted March 9, 2017 Author Share Posted March 9, 2017 This is the code output from the server side <div class="row compose-form"> <div class='email-header' style='border-bottom: none; margin-bottom: 25px;'><P>cndjvnjvnjfenvjev</P></div> <div class="row"> <div class="col-md-12"> <div class="col-md-6"><span class="to"> <strong>Michael Martiny</strong></span></div> <div class="col-md-6"><span class="to pull-right"> <a href="#" class="show_hide" rel="#slidingDiv_0"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a> 02-14-2017 (23 days ago)</span> </div> </div> </div> <div class = "slidingDiv" id="slidingDiv_0"> <div class="row"> <div class="col-md-12"> <div class="email-content"> <p>Bacon ipsum dolor amet pork loin pork belly short loin, ham capicola biltong meatball beef shoulder brisket. Short loin ball tip turkey turducken fatback filet mignon landjaeger frankfurter pork belly andouille flank, ham beef. Salami andouille strip steak biltong pancetta jerky sirloin shankle tail prosciutto ground round cow leberkas spare ribs venison. Sausage tail frankfurter burgdoggen fatback boudin ham. Short ribs alcatra t-bone picanha, pork chop prosciutto ham beef ribs chuck venison pastrami beef rump shankle meatball.</p> </div> </div> </div> </div> <hr class="mail-controls-divider"> <div class="col-md-12 reply-form"> <form role="form" class="form-horizontal" action="http://martinicms.dev/admin/mail//index.php?page=email&id=13" method="post" enctype="multipart/form-data"> <div class="form-group"> <input type="hidden" name="from" value="1"> <input type="hidden" name="for" value="1"> <input type="hidden" name="date" value="2017/03/09 08:09:10 pm"> <input type="hidden" name="subject" value="cndjvnjvnjfenvjev"> <input type="hidden" name="originalMessage" value="13"> </div> <div class="form-group"> <div class="col-md-12"> <textarea class="form-control" name="inputBody" id="inputBody" rows="5"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input type="reset" class="btn btn-warning" name="clear" id="clear" value="Clear"> <input type="submit" class="btn btn-primary" name="sent" id="sent" value="send"> </div> </div> </form> </div> <div class="row"> <div class="col-md-12"> <div class="col-md-6"><span class="to"> <strong>Michael Martiny</strong></span></div> <div class="col-md-6"><span class="to pull-right"> <a href="#" class="show_hide" rel="#slidingDiv_1"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a> 02-17-2017 (20 days ago)</span> </div> </div> </div> <div class = "slidingDiv" id="slidingDiv_1"> <div class="row"> <div class="col-md-12"> <div class="email-content"> <p>Bacon ipsum dolor amet irure corned beef adipisicing turkey. Boudin cow short loin pancetta, duis shank cupim alcatra ribeye in laborum. Aliqua chuck cupim, capicola andouille duis commodo. Aliqua dolore jerky, exercitation reprehenderit sausage est brisket.</p> <p>Shoulder boudin officia, et elit cow voluptate. Swine incididunt dolore sed in pork kielbasa sirloin meatloaf qui shankle dolore boudin fugiat. Leberkas tail flank turducken eiusmod pancetta, burgdoggen ut. Turkey consectetur pork, drumstick strip steak ea velit porchetta anim. Ham hock cillum ipsum, turducken short ribs picanha landjaeger. Est burgdoggen kevin pancetta boudin. Short loin short ribs dolor picanha jowl.</p> </div> </div> </div> </div> <hr class="mail-controls-divider"> <div class="row"> <div class="col-md-12"> <div class="col-md-6"><span class="to"> <strong>Michael Martiny</strong></span></div> <div class="col-md-6"><span class="to pull-right"> <a href="#" class="show_hide" rel="#slidingDiv_2"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a> 02-17-2017 (20 days ago)</span> </div> </div> </div> <div class = "slidingDiv" id="slidingDiv_2"> <div class="row"> <div class="col-md-12"> <div class="email-content"> <p>Is this working</p> </div> </div> </div> </div> <hr class="mail-controls-divider"> <div class="row"> <div class="col-md-12"> <div class="col-md-6"><span class="to"> <strong>Michael Martiny</strong></span></div> <div class="col-md-6"><span class="to pull-right"> <a href="#" class="show_hide" rel="#slidingDiv_3"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a> 03-09-2017 (17 hours, 13 minutes ago)</span> </div> </div> </div> <div class = "slidingDiv" id="slidingDiv_3"> <div class="row"> <div class="col-md-12"> <div class="email-content"> <p>Bacon ipsum dolor amet alcatra shank fatback cupim pastrami picanha filet mignon. Short loin shank pig, porchetta capicola sausage short ribs alcatra ball tip venison landjaeger cow. Beef prosciutto shankle, kevin picanha leberkas drumstick cow spare ribs brisket short loin. Kevin ball tip boudin sausage, short ribs tenderloin bresaola picanha shoulder ground round pig corned beef capicola frankfurter. Kielbasa pancetta ball tip meatball tri-tip. Landjaeger andouille strip steak salami tongue. Drumstick pig porchetta, frankfurter kielbasa shoulder leberkas ribeye meatloaf jowl filet mignon tail.</p> <p>Hamburger ham hock jerky fatback, short loin shankle pork loin turducken tail sirloin turkey venison shank salami chicken. Boudin shoulder short loin porchetta tail pork belly shankle leberkas chicken flank jowl ground round brisket pork loin landjaeger. Shank spare ribs capicola pork bresaola swine meatball frankfurter shoulder pastrami pig pork chop kevin shankle. Pork belly turkey strip steak frankfurter corned beef shankle.</p> <p>T-bone burgdoggen picanha flank. Shoulder strip steak tri-tip pork chop, t-bone filet mignon tongue shank capicola pork landjaeger. Bacon jerky salami boudin bresaola meatloaf flank tail kevin picanha pastrami capicola. Venison ham hock pork belly ball tip, jowl drumstick bacon pork chop ground round pork t-bone capicola.</p> <p>Meatball ham boudin cow bacon ribeye tenderloin rump andouille cupim sausage pork belly chuck flank. Brisket ball tip ham beef ribs. Picanha shankle ribeye andouille. T-bone pork bresaola, capicola ground round cupim andouille frankfurter jerky. Burgdoggen tongue capicola corned beef, pork chop bacon pork. Turkey pig pork alcatra pastrami sausage boudin ham hock brisket picanha strip steak cow andouille tail.</p> <p>Prosciutto ground round alcatra burgdoggen. Turducken shank ball tip landjaeger, kevin bresaola doner ham hock burgdoggen. Capicola pancetta kielbasa sirloin turkey. Tri-tip pancetta short loin beef bresaola beef ribs kevin meatloaf flank landjaeger.</p> </div> </div> </div> </div> <hr class="mail-controls-divider"> </div> Quote Link to comment https://forums.phpfreaks.com/topic/303410-forcing-a-div-to-the-bottom-of-another-div/#findComment-1544000 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.