Home/ Questions/Q 6176923
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:11:07+00:00

I am working on a page, where I am displaying some html components (surprisingly

  • 0

I am working on a page, where I am displaying some html components (surprisingly :P).

The requirement is that the size of all these html components change according to how the browser window is being re-sized or how the client side resolution is.

For example, If have reduced the size of my browser window to half, how do I get the components to reduce to half, automatically.

Any pointers towards this would be helpful.

EDIT :
The need is for the components to remain in the same left to right order i.e. introduce horizontal scroll bar if needed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming you want to do this as easily as possible without JavaScript. In your css make sure the width and height attributes of anything you want to re-size are in percentages and not in pixels. Additionally if you need a child component re-size make that a percentage as well.

    For example

    If this is your html

    Where the container div is the html component you want to auto resize

    <div class="container">

    <h1> some heading</h1>
    <p>some paragraph text</p>

    <div class="childContainer">
        <p>some more text</p>
    </div>

</div>

    do this in your css

    .container
{
    width: 80%;
}

.someChildContainer
{
   width: 50%;
}

    not this

    .container
{
     width: 800px;
}

    By using the percentage in this example, say for instance your total browser width is initially 1000px; The container class div will display at 800px and the childContainer class will be 400px. If the user shrinks the browser to a width of 500px, the container class will shrink to 400px and the childContainer will shrink to 200px;

    In other words the percentage width of any child container is based on the current with a parent container. If there is no parent container the percentage width is relative to the html body tag which is most cases is the width of the entire browser window.

    Here is the markup based on your sample

        <html>
<body>

<style type="text/css">
    .alignLeft{ 
            float:left;
        }

    .container
    {
        width: 80%; 
        background-color:#ccc;
        float: left;
    }

    .fixedContainer
    {
        width: 900px;
        float: left;
        background-color:#aaa;

    }

    table
    {
       width: 300px;
       float: left;

    }
</style>

<div class="container">

<div class="fixedContainer">

<table class="searchCriteria alignLeft" cellpadding="1%"> 

 <tr> 
 <td><label for="proposalRefNum">Proposal Id :</label></td>
 <td><input type="text" name="proposalRefNum" onchange="removeSearchResults()" class="searchControl" value="" id="proposalRefNum" title="Type the Proposal RefNum you are looking for"></td> 
 </tr> 

  <tr> 
 <td><label for="proposalName">Name :</label></td> 
 <td><input type="text" name="Proposal Name" onchange="removeSearchResults()" value="" id="proposalName" class="searchControl" title="Type the Proposal description you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalDescription">Description :</label></td> 
 <td><textarea rows="2" name="Proposal description" onchange="removeSearchResults()" id="proposalDescription" class="searchControl" title="Type the Proposal description you are looking for"></textarea></td> 
 </tr> 

 <tr> 
 <td><label for="proposalApplication">Application :</label></td> 
 <td><select class="searchControl" name="application" id="proposalApplication" onchange="removeSearchResults()" title="Select the application for which you are searching the proposals">
    <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr> 

</table>


<table class="searchCriteria alignLeft" cellpadding="10px"> 

 <tr> 
 <td><label for="proposalReleaseCandidateRefNum">Release Candidate Id :</label></td>
 <td><input type="text" name="releaseCandidateRefNum" onchange="removeSearchResults()" class="searchControl"value="" id="proposalReleaseCandidateRefNum" title="Type the release Candidate RefNum you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalCreator">Creator :</label></td> 
 <td><input type="text" name="Proposal creator" onchange="removeSearchResults()"value="" id="proposalCreator" class="searchControl" title="Creator of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalOwner">Owner :</label></td> 
 <td><input type="text" name="Proposal Owner" onchange="removeSearchResults()"value="" id="proposalOwner" class="searchControl" title="Owner of the proposals you are looking for"></td> 
 </tr> 

 <tr> 
 <td><label for="proposalLastUpdatedBy">LastUpdatedBy :</label></td> 
 <td><input type="text" name="Proposal Last Updated By" onchange="removeSearchResults()"value="" id="proposalLastUpdatedBy" class="searchControl" title="Users who last updated the proposals you are looking for"></td> 
 </tr> 

<tr> 
 <td><label for="proposalStatus" >Status:</label></td> 
 <td><select class="searchControl" onchange="removeSearchResults()" name="status" id="proposalStatus" title="Status of the proposals you are looking for">
     <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr>
</table> 

</div>
</div>

</body>
</html>
    • 0