html - Why does my 'right' div morph into left 'left' div when I add a table to my left div? -
i working 2 divs in container div; right , left. right div works fine containing table , search box, until add table left div. once merges left div; distorting table contained god knows where.
does know why doing this?
below html, css, , image of page before , after.
html:
<!doctype html> <html> <head> <link href="assets/css/master.css" rel="stylesheet" type="text/css" /> <link href="assets/css/menu.css" rel="stylesheet" type="text/css" /> <meta charset="utf-8"> <title>update account</title> </head> <body> <div class="container"> <div class="header"></div> <div class="menu"> <div id="menu"> <nav> <ul class="cssmenu"> <li><a href="home.php">home</a></li> <li><a href="account.php">account</a></li> <li><a href="projects.php">projects</a></li> <li><a href="users.php">users</a></li> <li><a href="logout.php">logout</a></li> </ul> </nav> </div> </div> <div class="leftbody"> <form id="form1" name="form1" method="post" enctype="multipart/form-data"> <div class="formelement"> <input name="projname" type="text" class="tfield" id="projname" placeholder="project name" value="<?php echo $_session["proname"]; ?>"> </div> <div class="formelement"> <input name="stardate" type="date" class="tfield" id="stardate" placeholder="start date" value="<?php echo $_session["stdate"]; ?>"> </div> <div class="formelement"> <input name="endate" type="date" class="tfield" id="endate" placeholder="end date" value="<?php echo $_session["endate"]; ?>"> </div> <div class="formelement"> <input name="prodesc" type="text" class="tfield" id="prodesc" placeholder="description of project" value="<?php echo $_session["probio"]; ?>"> </div> <div class="formelement"> <input name="update" type="submit" class="button" id="update" value="submit changes"> </div> </form> <!--why collapse left div!--> <div class="formelement"> <table width="" cellpadding="5" cellspacing="5"> <p><strong>current users on project:</strong></p> <tr> <td><strong>first name</strong></td> <td><strong>last name</strong></td> <td><strong>job role</strong></td> <td><strong>skill(s)</strong></td> <td></td> </tr> <?php if(mysqli_num_rows($search_query)!=0){ do{ ?> <tr> <td><?php echo $search_rs['fname']; ?></td> <td><?php echo $search_rs['lname']; ?></td> <td><?php echo $search_rs['jobrole']; ?></td> <td><?php echo $search_rs['description']; ?></td> <td><input type="submit" name="removeuser" value="remove" /></td> </tr> <?php } while ($search_rs=mysqli_fetch_assoc($search_query)); } else { echo "no results found"; } ?> </div> </div> <div class="rightbody"> <form name="search_form" method="post" action="" > <input type="text" name="search_box" value="" placeholder="search skills or user." /> <input type="submit" name="search" value="search" /> </form> <table width="" cellpadding="5" cellspacing="5" > <p><strong>search results:</strong></p> <tr> <td></td> <td><strong>first name</strong></td> <td><strong>last name</strong></td> <td><strong>job role</strong></td> <td><strong>skill(s)</strong></td> </tr> <?php if(isset($_post['search'])){ if(mysqli_num_rows($search_query)!=0){ do{ ?> <tr> <td><input type="submit" name="adduser" value="add" /></td> <td><?php echo $search_rs['fname']; ?></td> <td><?php echo $search_rs['lname']; ?></td> <td><?php echo $search_rs['jobrole']; ?></td> <td><?php echo $search_rs['description']; ?></td> </tr> <?php } while ($search_rs=mysqli_fetch_assoc($search_query)); } else { echo "no results found"; }} ?> </div> </div> <div class="footer"> <footer class="footer-basic-centered"> <p class="footer-company-motto">we believe</p> <p class="footer-links"> <a href="home.php">home</a> · <a href="account.php">account</a> · <a href="projects.php">projects</a> · <a href="users.php">users</a> · <a href="logout.php">logout</a> </p> <p class="footer-company-name">project mainframe © 2016</p> </footer> </div> </body> </html> css:
/* css document */ html,body { margin:0 0 20px; padding:0px; background-color: #d8d7d7; height: 100%; width: 100%; } .container { width:100%; height: 100%; clear:both; overflow:hidden; background-color:#fff; } .header { width:600px; height:100px; background-image: url(../images/logo1.jpg); background-repeat: no-repeat; background-position:center; } .menu { height:70px; width: 100%; } .leftbody { width:48%; float:left; height:100%; border: 1px solid black; } .rightbody { width:48%; float:right; height:100%; border: 1px solid red; } .formelement { width:350px; margin:6px auto; height:40px; } .formelementbio { width:350px; margin:6px auto; height:auto; } .formtable { width:350px; margin:6px auto; height:40px; text-align:center; vertical-align:middle;} .formtableprojects { width:600px; margin:6px auto; height:40px; text-align:center; vertical-align:middle;} .tfield { width:350px; height:35px; border:1px solid #e0dfdf; padding-left:6px; font-family:"lucida grande", "lucida sans unicode", "lucida sans", "dejavu sans", verdana, sans-serif; font-size:17px; } .button { width:200px; height:50px; border:0px solid; background-color:rgba(47, 83, 168, 1.00); color:#fff; font-size:24px; } .button:hover { background-color: rgba(26,8,114,1.00); color: #fff; } .skillselect {} .expnumber { margin-left: 15px; } .footer { height: 100px; width: 100%; position: absolute; right: 0; bottom: 40px; } .footer-basic-centered{ background-color: #292c2f; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); box-sizing: border-box; width: 100%; text-align: center; font: normal 18px sans-serif; padding: 45px; margin-top: 80px; } .footer-basic-centered .footer-company-motto{ color: #8d9093; font-size: 24px; margin: 0; } .footer-basic-centered .footer-company-name{ color: #8f9296; font-size: 14px; margin: 0; } .footer-basic-centered .footer-links{ list-style: none; font-weight: bold; color: #ffffff; padding: 35px 0 23px; margin: 0; } .footer-basic-centered .footer-links a{ display:inline-block; text-decoration: none; color: inherit; } /* if don't want footer responsive, remove these media queries */ @media (max-width: 600px) { .footer-basic-centered{ padding: 35px; } .footer-basic-centered .footer-company-motto{ font-size: 18px; } .footer-basic-centered .footer-company-name{ font-size: 12px; } .footer-basic-centered .footer-links{ font-size: 14px; padding: 25px 0 20px; } .footer-basic-centered .footer-links a{ line-height: 1.8; } } 
Comments
Post a Comment