My webpage is divided into three sections with the following proportions: 15% - 65% - 20%
In the right section, there is a div with the ID alchemy. I want to set the height of this div using
<div style="height:150px;">However, when I set the height in this way, the middle section also appears at a height of 150px. Why is that?
<tr>
<div class="left">
<td style="width:15%">
<div style="position:absolute">
<img src="https://graph.facebook.com/
<?php echo $user_id; ?>
/picture?type=large" style="position:fixed; top:60px; left:1px;">
</div>
</td>
</div>
<div class="middle">
<td style="width:65%">
<div class="input-button-collection">
<div id="input-collection" class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-link">
</i>
</span>
<input id="url-input-box" type="url" class="form-control" name="url" placeholder="http://www.example.com">
</div>
<div id="error-msg" class="help-block">
<i class="glyphicon glyphicon-exclamation-sign">
</i>
URL is invalid
</div>
<div class="rating-collection">
<input type="number" name="rating" id="rating-input" class="rating" />
<div>
<span id="error-msg-rating" class="help-block">
<i class="glyphicon glyphicon-exclamation-sign">
</i>
Please choose a rating
</span>
</div>
</div>
<div class="custom-input-button">
<button id="submit-url-btn" type="submit" class="btn btn-primary btn-lg">
Get Sentiment
</button>
</div>
<div id="old-records" align="center">
</div>
</td>
</div>
<div class="right">
<td style="width:20%">
<!--
<?php include 'logout.php'; ?>
-->
<div id="alchemy" style="overflow:hidden; clear:both">
</div>
</td>
</div>
</tr>