Home/ Questions/Q 9012537
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T03:01:30+00:00

I am making a very simple html page and would like to know how

  • 0

I am making a very simple html page and would like to know how to do the following two things for my page:

  1. I have a container div and would like to put the container div in the center of the page.
  2. The container div will grow and shrink when I resize the windows size.

I wrote the attached code but the container is always sticked on the left and it won’t change the size when I resize the window.

<title>Demo</title>
<head>This is a demo</head>
<style>
#nav
{
background-color: red;
float: left;
width: 200px;
position:relative;

}

#detail
{
background-color: green;
float : right;
width: 800px;
position:relative;
}

div.testDetail 
{
margin-top:10px;
margin-left:20px;
margin-right:20px;
margin-bottom:10px;
}

#container
{
width:1000px;
position:relative;
}
</style>

<hr>
<body>
<div id="container">
<div id="nav">
    <ul>Tests</ul>
</div>
<div id="detail">
    <div class="testDetail">
        <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/>
        <h3>Title</h3>
        <p>Testing</p>
    </div>
    <hr>
</div>
</div>
<body>

Did I miss something here? Any help will be appreciate!

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <div id="my-div">
  ...content goes here
</div>

    CSS

    #my-div{
  //For center align
  margin: 0 auto;
  // For grow & shrink as per screen size change values as per your requirements
  width: 80%;
  height: 50%;
}
    • 0