Keeping CSS elements inline when window shrinks -
i have form wont stay aligned when shrink page. div2 move on left , intrude on div1 , button positions become jumbled. have been reading on css , thought way go making wrapper div 2 child divs input types doesnt seem work. have tried sorts of things have found no avail. ideally elements shrink proportionally , stay alaigned window shrinks. absent @ least elements disappear off screen shrinks scroll bars. musch appreciated.
html:
<form action="updated_tt.php" method="post"> <input type="hidden" name="ud_id" value="<?php echo $id; ?>" /> <div id="wrap"> <div id="div1"> trouble report/request:<br/> <textarea class="tt_fld5" name="ud_problem" maxlength="300" rows="3" wrap=hard ><?php echo $problem; ?></textarea> <br/> </div> <div id="div2"> action taken: <br/> <textarea class="tt_fld5" name="ud_act_tkn" maxlength="300" cols="40" rows="3" wrap=hard ><?php echo $act_tkn; ?></textarea> </div> </div> <br/> <br/> <?php /* here create array of drop down list choices, go thru array 1 one , check "selected" attribute. if value retrieved mysql equals ddown_options array element construct <option> line "selected" value, else construct normal <option> line. note have make form here.*/ $option_to_preselect = $tkt_status; $ddown_options = array ( 'open', 'referred', 'closed', ); echo '<span class=tt_fld>ticket status: ' . '</span>' . '<br />'; $arrlength=count($ddown_options); print '<select name="ud_ticket_status" id="input_select">'; ($x=0;$x<$arrlength;$x++) { if ($ddown_options[$x] == $option_to_preselect) { print ' <option value="' . $ddown_options[$x] . '"' . ' selected="selected">' . $ddown_options[$x] . '</option>'; } else { print ' <option value="' . $ddown_options[$x] . '">' . $ddown_options[$x] . '</option>'; } } print '</select>'; echo '<br />'; echo '<br />'; /* assigned tech...*/ echo '<span class=tt_fld>assigned to: ' . '</span>' . '<br />'; $option_to_preselect = $assgnd_tech; $ddown_options = array ( 'unassigned', '***', '***', '***', '***', ); $arrlength=count($ddown_options); print '<select name="ud_assgnd_tech" id="input_select">'; ($x=0;$x<$arrlength;$x++) { if ($ddown_options[$x] == $option_to_preselect) { print ' <option value="' . $ddown_options[$x] . '"' . ' selected="selected">' . $ddown_options[$x] . '</option>'; } else { print ' <option value="' . $ddown_options[$x] . '">' . $ddown_options[$x] . '</option>'; } } print '</select>'; ?> <br /> <center><button type="submit" class="btn btn-primary btn-lg" onclick="updated.php">update trouble ticket</button></center> <br /> <!-- indicates dangerous or potentially negative action --> <center><button type="button" class="btn btn-danger" onclick="del_function()">delete trouble ticket</button></center> </form> css:
#wrap { overflow: hidden; padding: 2px 0 0 0; width: 94%; margin: 25 auto; } #div1 { font-weight: bold; font: x-large serif; font-weight: bold; float: left; width: 47%; margin-top: 10px; } #div2 { font: large serif; float: right; width: 47%; margin-top: 10px; font-weight: bold; font-size: x-large; }
the float attribute used allow content flow around block content depending on page dimensions. instead of floating content divs, try relative positioning.
Comments
Post a Comment