CSS Forum

**WebbyTom** · 07-28-2008, 06:14 PM

I am pulling my hair out over this one. See pictures below. I have my main content in Div Tags that are made to fit 800 x 600 screen resolution, when i resize my browser window the main content resizes itself to occomodate the window. What i want is for another Div Tag or Div Layer of certain size to be positioned over the main content Divs in a certain spot and move when the screen resolution is changed or the window is resized. Surely this cant be hard todo with some CSS??

**vangogh** · 07-28-2008, 07:45 PM

I'm not quite sure I understand the issue. Do you have any code or a link to a page online we could see?

If I'm understanding right the issue is that you want parts of the design to resize as someone resizes the browser. If the main content area already is resizing why do you need another layer on top. Could you just place things in the main content div and let them resize with it? If you place something inside the content div then you can have that resize with the content div or move with in it by keeping the inner div a fixed size and letting the margin around it be a relative measurement.

By the way the design itself is really nice. I like how it looks.

**WebbyTom** · 07-28-2008, 08:20 PM

Yeah i want a layer over top of the main content because it will hold a css menu. Here is the code

</style>
</head>

<body>



<div id="wrapper">


<div id="content"></div>



<div id="content2"></div>



<div id="content3"></div>


</div>


</body>
</html>

and CSS

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(back.jpg);
background-repeat: repeat;
text-align: center;
}
#wrapper {
width: 976px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#content {
width: 976px;
height: 561px;
background-image: url(images/index_01.png);
background-repeat: no-repeat;
padding-right: 10px;
padding-left: 10px;
margin: 0px;
}

#content2 {
height: 431px;
width: 976px;
background-image: url(images/index_02.png);
background-repeat: no-repeat;
}

#content3 {
background-image: url(images/index_03.png);
background-repeat: no-repeat;
height: 78px;
width: 976px;
}

**Jdinh04** · 07-28-2008, 11:41 PM

I think basically what you need is a master DIV and the content will be inside the master DIV that way the position of the content won't change and will be inside a 800x600 size DIV. See above at Tom's post.

**chrishirst** · 07-29-2008, 03:43 AM

can we recap a little?

Quote:

I have my main content in Div Tags that are made to fit 800 x 600 screen resolution,

#wrapper {
width: 976px;
Doesn't fit in to a 800px wide window.

Quote:

that are made to fit 800 x 600 screen resolution, when i resize my browser window the main content resizes itself to occomodate the window

If it is fixed width, It shouldn't be resizing anywhere.

Your posted code is set for is a 976px centred layout. There is nothing in that layout that should be resizing at all.

**vangogh** · 07-29-2008, 07:40 PM

First Chris is right. If you've explicitly set px widths for things than your layout is going to remain a fixed size.

I still don't see why you need a layer on top of the content layer for your css navigation. I would put the navigation inside the content layer

div id="content">
<div id="navigation">html for navigation here</div>
</div>

Then assuming you've coded things so the content div and the navigation div use relative measurements (%, em) the navigation div will expand/contract with the content div. Unless I'm missing something there really isn't any reason why the navigation div has to sit on top of the content div.

If I am missing something I apologize and ask for a little more explanation.