...

View Full Version : Absolute div is not postioning in relative div



mdmartiny1977
02-17-2011, 04:32 AM
I have a div called content that I gave the position relative so everything inside would position to that div.

When I give the other divs the absolute positioning it pulls them out of the div. What am I doing wrong?

Here is my code


#content {
width: 940px;
position:relative;
}

.message {
width: 950px;
height: 25px;
display: inline-block;
}

.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);
}

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;
}

shankar.adodis
02-17-2011, 06:17 AM
I have a div called content that I gave the position relative so everything inside would position to that div.

When I give the other divs the absolute positioning it pulls them out of the div. What am I doing wrong?

Here is my code


#content {
width: 940px;
position:relative;
}

.message {
width: 950px;
height: 25px;
display: inline-block;
}

.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);
}

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;
}

Hi,
On order to hold the absolute divs in a right position,
the div containing the absolute div must be set to
position:relative so that the absolute div can hold its position

Excavator
02-17-2011, 08:26 AM
Hello mdmartiny1977,
The only thing in your CSS that you quote that's absolutely positioned is .admin and it seems to work fine with your relative #content.

There must be something wrong somewhere else. If you post your entire code we might be able to help.

mdmartiny1977
02-18-2011, 01:16 PM
Here is my source code


<?php include('scripts/admin_script.php'); ?>
<!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"> <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>
<div class="misc"><span class="top">miscellaneous</span>Classified
Ads online <?php echo "$count"; ?></div>
</div><!--End #content-->
<?php include('page_includes/footer.php'); ?>
</div>
<!-- End #wrapper -->
</body>
</html>


Here is the layout.css code


@charset "utf-8";
/* CSS Document */
body {
background-color:#f1f1f1;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
position: relative;
}

#wrapper {
position: relative;
width:960px;
background-color:#f8f8f8;
margin:0 auto;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}

#header {
width:960px;
height:135px;
margin:0 auto;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
margin-top: 5px;
}

#header h2 {
padding:10px;
}

#header h3 {
padding:10px;
}

#content {
margin-left:auto;
margin-right:auto;
width:750px;
float:right;
padding:10px;
position:relative;
}

#sidebar {
border-right: #CCC thin solid;
width:150px;
float:left;
}

#sidebar a {
text-decoration:none;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 11px;
color:#006;
}

#sidebar a:hover:active {
text-decoration:underline;
}

#sidebar a:visited {
text-decoration:none;
}

#sidebar ul {
margin-left: -20px;
}

#sidebar li {
list-style:none;
display:block;
}

#footer {
text-align:center;
clear:both;
width:960px;
height:50px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-bottom: 5px;
}

#footer p {
padding:10px;
}



Here is the reset.css code


/* --------------------------------------------------------------

reset.css
* Resets default browser CSS.

-------------------------------------------------------------- */

html {
margin:0;
padding:0;
border:0;
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* This helps to make newer HTML5 elements behave like DIVs in older browers */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}

/* Line-height should always be unitless! */
body {
line-height: 1.5;
background: white;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: separate;
border-spacing: 0;
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td {
text-align: left;
font-weight: normal;
float:none !important;
}
table, th, td {
vertical-align: middle;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* Remember to define your own focus styles! */
:focus { outline: 0; }

Excavator
02-18-2011, 06:00 PM
Hello mdmartiny1977,
It looks like .admin is being pulled out of #content but it's really not.

Put a background color on #content and you'll see that layout.css' #content width: 750px; is being overridden by the specificity of admin.css' #content which sets the width at 940px.

Having CSS style an element from multiple entries is confusing enough, it gets even more confusing when those entries are in different .css files. Try to consolodate entries like that so all the styling is from one place and read a bit about specificity here (http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum