Issue with relative box when window resized

HTML & CSS
1

I’m trying to implement the sliding transparent overlay on my sight but I’m having a problem with the positioning of the DIV. When the window is re-sized the div does not retain relativity to the menu items above. Can someone give a pointer as to how this can be achieved?

This is what I’m trying to emulate…http://www.daphnes-restaurant.co.uk/general-information/

Here’s my website…http://www.galu.co.uk/newsite/goforitg.html

The yellow box remains relative to the red box but when my window is re-sized I would like the red box to be left align to the window so the users can see easier. A kind of "left align object£ on window re-size. If that makes sense.

2

Hi,

Welcome to Sitepoint :slight_smile:

It’s a little hard to see exactly what you want as you don’t have much in place for us to work with and what you have in place isn’t developed enough to give a suitable answer.

You have a number of errors in your small snippet of code anyway which we should address first.


#main {
	position:float;[B]/* did you mean float:left as there is no position:float property?*/[/B]
	background-color: #FF0000;
	width: 300px;
	Margin-Left:300px;[B]/* should be lower case*/[/B]
}
#second {
	position:relative;
	background-color: #FFFF00;
	padding: 50px;
	left: 40px;/* don't use relative positioning to move things around unless you understand why*/
	top: 200px;/*  "" "/
}

If you want your page to centralise but align left when squeezed then you need to create a page wrapper at the width that you want the layout to be and then centred with auto margins.

e.g.


#outer{
width:960px;
margin:auto;
}

You would then place your content inside this container as required.

It could be a fluid or elastic width if required.


#outer{
max-width:1280px;
min-width:760px;
margin:auto;
}

Using a fixed width you could have the menu and sidebar placed like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#outer {
	width:960px;
	margin:auto;
	background:#f9f9f9;
	overflow:hidden;
}
#sidebar {
	float:left;
	clear:both;
	width:200px;
	background:red;
	min-height:200px;
}
ul#menu {
	margin:0 0 10px;
	padding:0;
	list-style:none;
	text-align:center;
}
ul#menu li, ul#menu a {
	display:inline-block;
 *display:inline;/* ie6/7 inline-block fix */
	zoom:1.0;	/* "" */
	vertical-align:middle;
}
ul#menu a {
	padding:5px 10px;
	border:1px solid #ccc;
	margin:0 5px;
}
</style>
</head>

<body>
<div id="outer">
		<ul id="menu">
				<li><a href="#">Menu item</a></li>
				<li><a href="#">Menu item</a></li>
				<li><a href="#">Menu item</a></li>
				<li><a href="#">Menu item</a></li>
		</ul>
		<div id="sidebar">
				<p>Floated sidebar here</p>
		</div>
</div>
</body>
</html>

I think it may be better for you to first work on the basics before jumping straight into a complicated layout as you need to understand how all these things fit together. :slight_smile: