Menu
I am making a very simple html page and would like to know how to do the following two things for my page:
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.
711
<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%;
}
A shorthand method of Matt's CSS to do the horizontal centering is
margin: 0 auto;
The 0 will dictate the top and bottom margin's and the auto the left and right margins. If you want a margin on the top/bottom you can change the 0 to anything you want(ie margin: 20px auto; .
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
