Keeping CSS elements inline when window shrinks - css

Question

I have a form that wont stay aligned when I shrink the page. The div2 will move over to the left and intrude on div1 and the button positions become all jumbled. I have been reading up on css and thought the way to go was making a wrapper div then two child divs for my input types but it doesnt seem to work. I have tried all sorts of things I have found all to no avail. Ideally I would like the elements to all shrink proportionally and stay alaigned as the window shrinks. Absent that I would at least like the elements to just disappear off screen as it shrinks with scroll bars. Any help is 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 we create an array of the drop down list choices, then go thru the array one by one and check for the "selected" attribute.
If the value retrieved from MySQL equals the ddown_options array element then construct <option> line with the "selected" value, else construct
a normal <option> line. Note We have to Make this a 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">';
for ($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 />';
/* For 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">';
for ($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 a 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;
}

Answer 1

The float attribute is specifically used to allow content to flow around block content depending on page dimensions. Instead of floating your content divs, try relative positioning.

Answer 2

Here's the CSS that worked for me just for the record:
#wrap {
overflow: hidden;
padding: 2px 0 0 0;
width: 1200px;
min-height:150px;
margin: 25 auto;
}
#div1 {
font: large serif;
font-weight: bold;
position: relative;
left: 10px;
width: 300px;
font-size: x-large;
max-width:300px;
}
#div2 {
font: large serif;
font-weight: bold;
font-size: x-large;
position: relative;
left: 600px;
width: 300px;
bottom:155px;
}