How to fix div tag at a specific position

**Leiff** · 04-03-2010

I wish I could fix a div tag on my page to a specific place but I do not how? Here is the code used:

HTML Code:

div.plan
{
	width:780px;
	margin-left:auto;
	margin-right:auto;
	margin-top:140px;
}

I tried to use "position: fixed;" but it just do not place the tag where I want in my page.

**!const** · 04-03-2010

With the absolute value you should be able to place your layer where you want.

HTML Code:

position: absolute;

But it depends on the version of your browser. Show us your complete code HTML + CSS

**Leiff** · 04-03-2010

This does not work. The tag is in the right position in my page but only on the horizontal axis. I position a tag on my page and when you go down the page or that reduces/enlarges the window remains in the same place (ie below my banners).

Htm:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link rel="stylesheet" media="screen" type="text/css" title="Test" href="css/my css.css"/>
<title>Shigeru Miyamoto_Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Evolution;communication" />
</head>
<!--Span is used to create columns (blocks side by side). Div is used to create blocks one beneath the other. Div nest in Span is not valid XHTMLement speaking -->
<body id="up">
<div class="plan">
  <h4><img src="css/smart1.jpg"/>Home</h4>
</div>
<div class="under_plan">
<h2 id="Biography" ><a href="biography/biography.htm"title="Learn more!">Biography</a></h2>
	 <p>Shigeru Miyamoto, born November 16, 1952, is a Japanese designer of video game. He is the creator of franchises Super Mario, Donkey Kong, The Legend of Zelda, Star Fox, F-Zero and Pikmin for the Nintendo. He has also supervised many titles published by Nintendo and developed by other studios. He is currently CEO of Nintendo EAD.</p>
 <h2 id="Works"><a href="work/work.htm"title="Learn more!">His works </a></h2>
	 <p>Shigeru Miyamoto is considered one of the greatest figures of the video game, dubbed the "Spielberg of videogames" or "The inventor of the modern game. " In 1998 he was the first person to enter Hall of Fame of the Academy of Interactive Arts and Sciences.</p>
 <h3 id="bump"><a href="#up">Bump</a></h3>
</div>
</body>
</html>

Css:

HTML Code:

/* CSS Document */
body
{background-image:url("banner.jpg");
background-repeat:no-repeat;
background-position:top;
background-attachment:fixed;
}
div.plan
{
	width:780px;
	margin-left:auto;
	margin-right:auto;
	margin-top:140px;
}
div.under_plan
{	
	width:780px;
	margin-left:auto;
	margin-right:auto;
	margin-top:140px;
}
blockquote
{font-style: italic;
font-size:small;
text-align:center;
margin-top:70px;
}
p
{font-size:16px;
}
h1
{color:black;
font-size:x-large;
text-align:center;
}
h2
{color:#375D81;
font-size:medium;
}
h3
{font-size:medium;
font-weight:bold;
}
#bump
{ font-size:x-small;
}
th
{background-color:#6699FF;
}
tr
{background-color:#6699FF;
}
a
{color:#6600FF;
}
a:hover
{color:green;
}
#menu
{text-decoration:none;
color:#6600FF;
}
#menu:hover
{color:#6666FF;
}
td a
{text-decoration:none;
}

**!const** · 04-03-2010

Your goal is to have a banner and below the page (the layer under_plan)? see thumbnail)

I just changed this:

HTML Code:

div.plan
{
    width:780px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    border: 1px solid green;
    height: 100px;
}
div.under_plan
{    
    width:780px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    border: 1px solid red;
}

**Leiff** · 04-03-2010

- I put the div tag "plane" over my banner located in body (it must be put in a div tag?). And that does not fall with the rest of the text. (The div tag "plan" contains the text "Home")

- The div tag "under_plan" is the site text to scroll.

- I use Firefox

**!const** · 04-03-2010

Ok I understood what you want to do. The menu is done by creating two blocks: one for the set menu and one for the rest. And subtlety is to put the correct style on the second block to make it as if it makes the whole page: just this second block is scrollable.

In this example, the style of blocking sets:

HTML Code:

#block-sets  { 
	position:fixed;
	overflow:auto;
	right:0px;
	left:0px;
	top:0px;
	height:80px;
	border-bottom: 1px solid black;
}

And the style of the second block with all the content:

HTML Code:

#content { 
    position:fixed;
    overflow:auto;
    right:0px;
    left:0px;
    bottom:0px;
    top:85px;
}

The HTML code in big:

HTML Code:

<body>
    <div id="block-sets">
        <p>While this remains at the top</p>
    </div>
    <div id="content">
        <p>Contents of the page</p>
    </div>
    <script type="text/javascript">
         document.getElementById("content").focus()
    </script>
</body>