Div is not positioning right

Page 1 of 1

5 Replies - 677 Views - Last Post: 15 February 2011 - 11:58 PM

#1 mdmartiny  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 85
  • Joined: 28-May 10

Div is not positioning right

Posted 15 February 2011 - 10:41 PM

I have a div called content with positioning set to relative. Inside that div is two more divs with there positioning set to absolute.

They are positioning themselves outside the content div. I have tried setting the content div positioning to absolute. I am not sure if I am missing something or doing something wrong. Could someone please help me?

Here is the code that I am using

#content {
	position: relative;
	width: 940px;
	margin-left: auto;  
	margin-right: auto;
	height: auto;
	overflow: visible;
}

.message {
	width: 950px;
	height: 25px;
}

.admin {
	width: 200px;
	border:#CCC thin solid;
	margin: 0;
	padding: 0;
	position: absolute; left: 15px;
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	box-shadow: 0px 0px 10px #888;
	-moz-box-shadow: 0px 0px 10px #888;
	-webkit-box-shadow: 0px 0px 10px #888;
	background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF)); 
	background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
}

.misc {
	width: 200px;
	border:#CCC thin solid;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	min-height: 50px;
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	box-shadow: 0px 0px 10px #888;
	-moz-box-shadow: 0px 0px 10px #888;
	-webkit-box-shadow: 0px 0px 10px #888;
	background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF)); 
	background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
	position: absolute; left: 650px; top: 250px;
}

ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	list-style-position:outside;
	text-indent: 5px;
}

li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	display:block;
	width: 200px;
	margin-bottom: 3px;
}

li a {
	text-decoration: none;
	color: #006;
}

li a:hover {
    padding-left: 5px;
	color: #006;
	text-decoration: underline;
}

.top {
	font-variant:small-caps;
	text-transform:capitalize;
	display: block;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 5px;
	width: 200px;
	height: 25px;
	line-height:25px;
	background-color:#CCC;
	text-align:center;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Div is not positioning right

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 745
  • View blog
  • Posts: 1,525
  • Joined: 30-January 09

Re: Div is not positioning right

Posted 15 February 2011 - 11:14 PM

Could you post your HTML as well please?
Was This Post Helpful? 0
  • +
  • -

#3 mdmartiny  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 85
  • Joined: 28-May 10

Re: Div is not positioning right

Posted 15 February 2011 - 11:22 PM

View Poste_i_pi, on 16 February 2011 - 06:14 AM, said:

Could you post your HTML as well please?


Here it is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/admin.css" media="screen"  />
<title>Administration Area</title>
</head>
<body>
<div id="wrapper">
   <?php include('page_includes/header.php'); ?>
   <div id="content">
      <div class="message"><?php echo "$msg"; ?> <a href="logout.php">Logout</a><span style="float:right; margin-right: 5px;"><?php echo "$today"; ?></span></div>
      <div class="admin misc"><span class="top">miscellaneous</span>Classified
         Ads online <?php echo "$count"; ?></div>
      <h1>Administration Page</h1>
      <div class="admin"> <span class="top">Administration</span>
         <ul>
            <li><A href="show_add.php">Add a Ad</A></li>
            <li><a href="pick_modify.php">Modify a Add</a></li>
            <li>Delete Ad</li>
            <li><a href="user/index.php">Add a User</a></li>
            <li><a href="user/pick_user.php">Delete a User</a></li>
            <li><a href="#">View Database Records</a></li>
            <li><a href="php_info.php">PHP info</a></li>
            <li><a href="make_backup.php">Backup Database</a> </li>
            <li><a href="https://p3nlmysqladm001.secureserver.net/nl50/529/index.php?lang=en-utf-8&amp;token=db052d2ddafce3f6ba841cfe0a6c224a">View Database</a> </li>
         </ul>
      </div>
      <ul>
         <li>Show Contacts, Ordered by name</a></li>
      </ul>
      </p>
   </div><!--End #content-->
   <?php include('page_includes/footer.php'); ?>
</div>
<!-- End #wrapper -->
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 745
  • View blog
  • Posts: 1,525
  • Joined: 30-January 09

Re: Div is not positioning right

Posted 15 February 2011 - 11:35 PM

In .admin{} and .misc{} you have position:absolute. Change both of these to position:relative.
Was This Post Helpful? 0
  • +
  • -

#5 mdmartiny  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 85
  • Joined: 28-May 10

Re: Div is not positioning right

Posted 15 February 2011 - 11:43 PM

View Poste_i_pi, on 16 February 2011 - 06:35 AM, said:

In .admin{} and .misc{} you have position:absolute. Change both of these to position:relative.


I thought that when you set the parent position to relative you then could do absolute positioning to divs within the parent div
Was This Post Helpful? 0
  • +
  • -

#6 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 745
  • View blog
  • Posts: 1,525
  • Joined: 30-January 09

Re: Div is not positioning right

Posted 15 February 2011 - 11:58 PM

View Postmdmartiny, on 15 February 2011 - 11:43 PM, said:

View Poste_i_pi, on 16 February 2011 - 06:35 AM, said:

In .admin{} and .misc{} you have position:absolute. Change both of these to position:relative.


I thought that when you set the parent position to relative you then could do absolute positioning to divs within the parent div

Yes you can, but if you want the parent div to encapsulate the children, you have to set the children to relative or fixed.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1